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Introduction 


Hands-on with ASP.NET MVC book 
give you a fine Launchpad to get started 
on MVC. I have written the book in such 
a fashion that you will solve one case 
study while studying the book. By the 
time you will finish the book, you would 
have completed web version and mobile 
version of development using MVC. 
Now, one important point to understand 
here that ASP.NET MVC is a major shift 
for all Microsoft developers. ASP.NET 
MVC emphasizes clean architecture, 
design patterns and testability. At every 
part of the book you will get practical 


example of all the theoretical concepts 
with complete demo. 

ASP.NET MVC is basically a web 
development framework from Microsoft 
which combines the features of MVC 
(Model-Mew-Controller) architecture. 
Now, ASP.NET MVC is not something 
which is built from the ground zero. It 
built on the top of ASP.NET, so 
developers enjoy almost all the 
ASP.NET features while building the 
MVC application. ASP.NET MVC is an 
alternative approach to an existing Web 
Forms approach. 

This book is basically comprised of 15 
chapters covering all the parts of MVC 



development. 1 st chapter starts with the 
introduction of ASP.NET MVC where in 
you will see how MVC gained maturity 
in different releases. 1 st chapter will 
also showcase that what you are going to 
build by giving the application glimpse 
in its finished form. Then, you will start 
creating your MVC project right from the 
scratch. In 2 nd Chapter you will get the 
complete idea of controllers. Here, after 
understanding the basics of controllers, 
you will be writing your 1 st controller. 
2 nd chapter also covers different types of 
action results, filters and many more 
things. 3 rd chapter will have view 
introduction with syntactic sugar. This 
section also explains some of the core 



concepts of data — (dash) attributes that 
how views behind the scenes emit these 
tags. Apart fr om HTML helpers, you 
will also work with different types of 
view in it. Chapter 4 and 5 will be all 
about data modeling. In this chapter you 
will come to know how to get started 
with entity framework, also how to setup 
the entities and migrations. Here you 
will also see different types of 
validations in action. 

Chapter 6 is all about Client side 
scripts. Its main focus would be on how 
to manage scripts, how to work with 
Ajax helpers and how to write an Async 
Search. Chapter 7 is covering all the 
security related features like 



Membership, Authentication, Roles, 
Open Authentication and many more 
things. Now, chapter 8 is all about 
infrastructure topic like Caching and 
different Diagnostics techniques. This 
topic stresses how to improve the 
Application performance by 
implementing caching. 9 th chapter is all 
about testing. It start with unit testing 
where in you can test your application 
logic, then web testing and load testing 
where in you can test your website 
performance in different test scenarios. 
Then we have 10 th chapter which is all 
about deployment. In this case you will 
1 st deploy the application to IIS, then on 
internet on AZURE. Chapter 1 1 is all 
about routing concepts. This chapter 



deals with different routing rules. Then, 
chapter 12 comprise of Web API and 
Dependency Injection. Both of these 
topics are really important and 
interesting as well. You will learn how 
to implement both with a complete 
application demo. In chapter 13, you 
will be optimizing your application in 
such a way that it will support mobile 
browsers as well. Then, Chapter 14 is 
dedicated to the new features of 
ASP.NET MVC 5 with complete demo. 
Last but not the least which is the bonus 
part of this book MVC 6; here, in 
chapter 15 you will start from the 
features discussion, then prerequisites 
required for MVC 6. MVC 6 is a major 
breakthrough from Microsoft side 



towards being Open Source Compliant. 
So, stay tuned for a stunning journey. 
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WHO SHOULD 
TAKE THIS BOOK 


Hand-on with ASP.Net MVC is designed 
to teach ASP.NET MVC, from grass root 
level to advanced topics. I have written 
the book in such a way that even if you 
are new to ASP.Net background, you 
won't feel difficulty in understanding the 
concepts. 

I also understand that many of our 
readers are familiar with ASP.NET Web 


Forms, so one important point to 
understand here that ASP.Net MVC is 
not a replacement to Web Forms at all. 
Now, onwards there will be one more 
design technique to build websites. 

I have worked hard to make sure that this 
book is valuable for developers who are 
experienced with ASP.NET MVC, or 
even freshers coming out of college. 

This book is also very well suited to 3 rd 
year and Final year student as this will 
help them greatly while building their 
projects. Also, since ASP.NET MVC is 
one of the hottest trends across industry, 
so from the point of interview 
preparation as well, it will be a good 
reference book. Now, apart from MVC 



you will also learn how to convert the 
same app to support mobile browsers, 
also how to host the app on Azure 
(Microsoft's Cloud Version). 
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with him for the first time. He is tech 
extrovert and interacting with wide 
variety of technology to gain knowledge, 
guideline and feedback. His interactions 
with the diverse ASP.NET community 
give him some great insights on how 


developers can begin, learn, and master 
ASP.NET MVC. He is helping number 
of blog followers on various topics 
which is known to him and generated a 
lot of fans and followers with his 
technical skills. With a background 
rooted in community and open source, I 
count him not only as an amazing 
technologist but also a close friend. 

There are number of frameworks 
available in market but ASP.NET MVC 
6 brings you a new ASP.NET Web API 
(a new framework for building HTTP 
services), updated default project 
templates that leverage modern web 
standards, solid mobile web application 
support, enhanced support for 



asynchronous methods, and more with 
easy integration with other microsoft 
technology. Currently, MVC 6 is in beta 
version, which will be officially 
releasing next year. But, Rahul took this 
opportunity to include MVC 6 as well in 
this book. Before touching MVC 6, he 
has also covered MVC 5 and 4 with 
complete detail with live demo. 

Rahul also developed number of 
tutorials to help developer understand 
concepts and also planning to upload a 
number of videos in line with it. One can 
always refer his articles on his blog 
t http : //myview.rahulni vi .net/ ) . 
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Errata 


Finally, this book is mostly based on my 
opinions. I made every possible effort to 
ensure that there are no errors in the text 
or in the code. However, no one is 
perfect, and mistakes do occur. I've 
spent a lot of time researching the topics 
in this book and I implement from real 
world experience as much as possible. 
With that words, if you find something 
you believe is absolutely wrong — or 
even something you strongly disagree 
with — let me know 


@:rahulsahavl 9@gmail.com . 


Chapter 1: 
Getting Started 

WHAT DO you find in 
this CHAPTER? 


=> Introduction 
=> Understanding ASP.NET 


MVC 


=> The MVC Pattern 

=> Brief History of MVC 
Pattern 

=> MVC Life Cycle 

=> Software Requirements 

=> Application Glimpse 

=> Creating a MVC 
application 

=> How MVC applications 
are structured 


=> Summary 



Introduction:- 


Hi Friends, My name is Rahul Sahay, 
your instructor for ASRNET MVC. In 
this section I'll walk you through the 
overview of MVC. I'll also give a brief 
snapshot of the History of MVC when 
it's first introduced and then start the 
development process. I assume that most 
of the readers who are reading this book 
are from the ASP.NET background. 
However, even readers who are new to 
ASP.NET architecture don't need to 
bother at all as I start right from the 
grass root level. So, let's get started. 


Understanding ASP.Net 


MVC:- 


ASP.NET MVC framework basically 
designed to build the web applications 
which take the general legacy approach 
Model View Controller Pattern. This 
pattern existed in tech space since 
decades; this is not something which is 
being built by Microsoft from ground 
Zero. However, Microsoft has 
introduced its very own MVC 
framework called as ASP.NET MVC 
Framework. Also, it's equally important 
to understand that Microsoft hasn't 
written this MVC Framework right from 
the scratch, rather it's been built on the 
TOP of ASP.NET which means, 
ASP.NET MVC still has almost all 


features of ASP.NET like Master Pages, 
Session Management, Caching, 
Different types of Authentication and 
many more thing. 

Also, one more important thing to 
understand here that ASP.NET MVC is 
not the replacement of ASP.NET Web 
Forms. Microsoft has provided MVC as 
an alternative approach to build the web 
application. So, going forward, now 
there will be two different approaches to 
build the web application. However, 
ASP.NET MVC basically follows the 
same core principle what other 
languages follow, plus it has got 
ASP.NET advantage, like it has got the 
support of Managed Execution 



Environment, it uses .Net feature like 
Extension Methods, DLR features and 
many more. Some of the common 
features of MVC which I would like to 
list out are:- 

Stateless:- MVC Framework follows 
the stateless pattern which means there 
will be no illusion of state at all. Also, 
there will be no Page Life Cycle, no 
Server Side Controls and no View State 
also. So, instead of using any server side 
controls like Grid Controls or Menu 
Controls, we will be writing and 
crafting the HTML completely from 
scratch. So, this way we'll be having 
complete control on our HTML. 



No Page Extensions:- This is also one 
of the best things which MVC says, so 
there will be no page extension like 
.aspx. So, here URL comes is pretty 
handy and easy to use and easy to 
remember for readers and also for the 
search engines. Basically, it is said that 
pages which are coming without any 
page extension are ranked higher in the 
search engine. 

Extensible:- This is also one of the 
common goals for MVC to be 
completely extensible throughout all the 
aspects. So, like when we talk about 
views, one may use aspx view engine to 
write the view or use the razor to do the 
same or user can download any other 



view engine and use the same with the 
project as well. But, in this case we'll 
stick to Razor view engin 

Testability: -Testability is the one of the 
most important factor of using MVC. It's 
basically quite simple, it maintains 
complete separation of concerns, and 
hence it's easy to write and test for each 
module explicitly So, here we can 
easily write test cases for each module 
explicitly 


The MVC Pattern:- 


Having said to my earlier statement that 
ASP.NET MVC design pattern is not 
new, this is the technique which is being 
used since decades across many 
different technologies like C++, Java, 
etc. and now in C# as a design pattern 
for building web applications. It's 
powerful and stylish design pattern mean 
for separation of concerns which means 
within the application itself we'll be 



having separate Data Logic and UI 
Logic. Neither of these are dependent on 
each other. Hence, each of these can be 
tested separately by writing unit test 
cases. Below is the brief snapshot of 
MVC and its responsibilities. 

Model: - Models are basically a 
collection of classes where in you will 
be working with data logic as well as 
business logic. So, basically models are 
containers which are business domain 
specific or I would say section which is 
used to interact with database and also 
used to manipulate the data to implement 
the business logic. So, withASP.NET 
MVC this is pretty much easy to use data 
access layer with Entity Framework, 



ADO. Net or NHibernate combined with 
custom code. 

View: - Views are nothing but a pure 
HTML which decides how the UI ( User 
Interface) is going to look like. All I 
can say is that views are basically 
templates which decide the look and feel 
or presentation of your app. This is the 
section which is going to present the 
static HTML with extracted data from 
database at the desired place. 

Controller: - Controllers are basically a 
bunch of classes which handles 
communication from the user. This is the 
one which is responsible for taking 
incoming HTTP Request and transferring 



the control to the appropriate section of 
the application. So, this is the special 
class which wires up the relationship 
between view and model. So, it 
responds to the user input, interacts with 
the model and decides which view to 
render. Basically, Controller classes 
maintain one convention that it has to be 
suffixed with the name “controller”. 


Brief History of MVC 
Pattern 


ASP.NET MVC Pattern is the idea 
which is being developed by Scott 
Guthrie in 2007. He is the key architect 
of this design pattern. As far as my 


knowledge goes, I always designate 
Scott Gu, as the father of.NET. He is the 
main person who originated the idea of 
.NET. Since, then Microsoft or Scott's 
team has added tons of feature in .NET 
development, which makes developer 
feel comfortable writing any kind of 
project using .NET. 

ASP.NET MVC 1 Features:- 

Here, in this section apart from 
separation of concerns, Unit tests were 
added. So, while writing any project, 
you could write unit test for specific 
modules side by side. MVC 1 st was 
released on 13 th March 2009. 



ASP.NET MVC 2 Features:- 


ASP.NET MVC 2 was released just in a 
span of 1 year. This has got some really 
cool features which make MVC more 
robust and powerful. This version was 
released on March 2010. Some of the 
features of MVC 2 have been listed 
below:- 

• UI Helpers with Scaffolding 
templates. 

• Model validation on Client and 

Server side. 

• Strongly typed HTML Helpers . 

• Enhanced Visual Studio tooling. 


ASP.NET MVC 3 Features:- 



ASP.NET MVC 3 was officially 
released in 201 1 . MVC 3 has come with 
major improvements in many sections. 
Some of the MVC 3 features are listed 
below:- 

• Inclusion of Razor View Engine. 

• .Net 4 Data annotations. 

• Robust model binding and 
validation. 

• Inclusion of Global Action 
Filters. 

• Nice JS, JQuery support. Also, 

included Unobtrusive 

JavaScript validation. 

• JSON Binding 

• NuGet Integration to resolve the 

software dependencies on the 
fly 



Don't worry I'll do detailing each of the 
topic in coming chapters; here I just 
want to make things clean and simple. 


ASP.NET MVC 4 Features:- 

ASP.NET MVC 4 has done value 
addition on MVC 3. On the other hand it 
has become a complete web 
development package as a whole which 
offers developer complete suites of 
development stack. Some of the common 
features are listed below: - 

• ASP.NET Web API 

• Improved Project Templates. 
Added new Ones 

• Inclusion of Mobile Projects 
using JQuery Mobile. 



• Various Display Modes 

• Asynchronous Controllers 

• Bundling and Minification 

ASP.NET MVC 5 Features:- 

Again ASP.NET MVC 5 has done many 
value additions to MVC 4. But, all of 
these changes are around its scaffolding 
templates, authentication technique, 
Bootstrap and many more. Some of the 
common features are listed below. 

• Scaffolding 

• ASP.Net Identity 

• One ASP.Net 

• Bootstrap 

• Attribute Routing 

• Filter Overrides 



You will learn complete features with 
demo in chapter 14. 


ASP.NET MVC 6 Features:- 

ASP.NET MVC 6 in many terms is a 
unique framework as it's a major change 
in MVC. All these features will be 
discussed in the last chapter in detail, 
where we'll see the glimpse of MVC 6. 
Below, I have listed some of the 
common features of MVC 6. 

• Common Framework for MVC, 
Web API and Web Pages 

• Smooth Transiting from Web 
Pages to MVC 

• Built DI First 

• Runs on IIS or Self Host 



• Based on the new Request 
Pipeline in ASP.NET vNext 

• Runs Cloud Optimized 

• No Build Dependency 

• Enhanced developer experience 

• Open Source 

• Cross-Platform Support 

Apart from above listed features there 
are other things also involved which are 
explained with complete demo in 
Chapter 15. 


MVC Life Cycle 

MVC Life Cycle in a nutshell will give 
you glimpse of overall architecture. 


Here, in the below diagram you will 
come to know How MVC application 
behaves when it's invoked from the 
browser. So, as you see in the diagram, 
as soon as request comes from the 
browser, it is picked up by the routing 
engine. Hence, ASP.NET Routing is the 
first step in MVC Life cycle. Basically it 
is a pattern matching system which 
matches the request's pattern against the 
registered patterns in the Route Table. 
When a matching pattern found in the 
Route Table, the Routing engine 
forwards the request to the 
corresponding IRouteHandler for that 
request. If the routing engine doesn't 
match the pattern then it returns 404 
HTTP Status code. 



Then, MVC handler implements 
IHttpHandler interface and further 
process the request by using 
ProcessRe quest method. Then in third 
step MVCHandler uses the 
IControllerFactory instance and tries to 
get a IController instance. If successful, 
then Execute method is called. Now, 
once the controller has been instantiated, 
Controller's Actionlnvoker checks 
which action to invoke on the controller. 
Next, the action method receives user 
input, prepares the appropriate response 
data, and then executes the result by 
returning a result type. The result type 
can be ViewResult, 

Re dire ctToRouteRe suit, 

Re dire ctRe suit, Conte ntRe suit, 



JSONResult, FileResult, and 
EmptyResult. Now, the next step is the 
execution of the View Result which 
involves the selection of the appropriate 
View Engine to render the View Result. 
It is basically handled by IViewEngine 
interface of the view engine. Now, at 
last Action method returns a string, 
binary file or a JSON Formatted data. 
The most important Action Result is the 
Vie wRe suit, which renders and returns 
an HTML page to the browser by using 
the current view engine. 



HTTP Request 


# 



* 


Response 
















Software Requirements 


MVC 4 runs comfortably on any of the 
following windows Operating Systems. 

• Windows 8 

• Windows 7 

• Windows Vista 

• Windows XP 

• Windows Server 2008 R2 

• Windows Server 2008 

• Windows Server 2003 

MVC 4 tooling comes by default with 
Visual Studio 2012/13. This can also be 
installed on Visual Studio 2010 as well. 
However, if you are not having the 


professional version of Visual Studio, 
you can use free version of visual studio, 
Visual Web Developer Express from the 
Microsoft Site itself. If you're using 
Visual Studio 2010, you can install MVC 
4 using the Web Platform Ins taller 

t http://www.microsoft.com/web/ gallery/ 
appid=MVC4VS2010 ). 


Application Glimpse:- 

Now, before jumping to create our 1st 
MVC application, let me give you demo 
that what we are going to create here. 

So, below is the snapshot of 
“ MovieReview ” site in its finished form 


If you look at the URL, you will notice 
that I have already deployed the same on 
Azure (Microsoft's Cloud). 



So, here we are at the home page listing 
couple of movies. It has got features like 
Paging, Async Search, Bootstrap 
Features and many more UI related stuffs 
which you will be exploring in the 
coming chapters. 




Now, the above page is quite 
descriptive. So, when you click the Edit 
link corresponding to the movie, it will 
emit text in editable mode as shown 
below. 





So, when you click on “ Back to List ”, it 
will take you to the Movies List back 
and from there if you click the “ Details ” 
link, it will give the movie details as 
shown ahead. 


J mymovierevlews.azu rewebs it 

:es.net/Movies/Details/l 

Select One Home 

[>ut Contact Movies o Login 

Details 

Movie 




Now, from here also you can edit the 
record. Now, back from Movies List if 
you click on “ Reviews ” link, it will take 
you the below page. 




C) mymoviereviews-aziirewebsites.net/LlovieReviews/Tndec/l 


Select One Home About Contact Movies <• Login 


Review for Godzilla 

Create New 

RevlewerName |RevlewefComments |RevlewerRatlng 
Rahul Sahay Excellent S Edit 

Back to List 


So, from here you can obviously create a 
new review as well as shown in the 
screen shot. 



Now, as you can see in the above screen 





shot as soon as user tried to enter a 
rating 6 which is greater than 5, it threw 
an error. So, at this point of time, you 
cannot submit this review. You need to 
fix this 1st and then submit as shown 
below. 



So, as you can see in the above screen 
shot, as soon as I corrected the error, 
error description wiped out 




automatically. Now, I can go ahead and 
submit the record. 




o Registc 

Select One Home About Contact Movies o Login 


Review for Godzilla 


ReviewerName |ReviewerCommenls | ReviewerRating 
Rahul Sahay Excellent 5 Edit 

RohltSahay Awesome S Edit 

Back to List 


Now, if you click “ Delete ” option back 
from the list, then you will land up in the 
below shown delete page. 


IJ S ^SSSBS, 

° Register 

Select One Home About Contact Movies o Login 


Delete 

Are you sure you want to delete this? 
Movie 



Gareth Edwards 



Delete! | Back to Us 




So, from here, you can go ahead and 
delete the page. Now, if you come back 
on the Movies List, you will notice that 
there is no option for creating the movie. 


Index 


sreth Edwards2014 


Die Another Day Lee 


Well, for that I have made couple of 
changes like you should be authenticated 
1 st and authenticated as an admin, then 
only you will be able to see the Create 
Link. So, let me go ahead and login using 
my credentials. 




• Register 

Select One Home About Contact Movies « Login 

Log in. 

Use a local account to log in. 

Log in Form 



Then, it will show me the below Create 
Link. 



Select One Hone About Contact Movies rahulsahay Logoff 


Index 



MovieName DirectorName ReleaseYear 

Godzilla Gaie(hEdwards2014 Edll I Details I Reviews 1 Delete 



So, with that Create link, only 
admin users can go ahead and 





create the movies. So, this way 
I have restricted this action for 
anonymous users. Now, one 
more thing which I would like 
to show you is glimpse of my 
logging technique. I am a big 
fan of ELMAH Web UI which 
you learn in detail in coming 
chapters. But, for now just look 
at the glimpse of that. So, when 
you navigate 

http://mvmovi erevi ews. azurewe 
then it will produce you the 
application snapshot as shown 
ahead. 


Error Log for ROOT on RD00155DD28557 


Currently, my application is running fine; 
hence it didn't produce any error log. 
Like this there are many more features 
which you can delve while building the 
application right from the scratch. So, 
stay tuned and get ready to build your 1 st 
MVC application end to end. 

Also, after creating the web application, 

I have converted the same app to support 
mobile browsers as well. So, now, if 
you open the same site in your mobile 
phone, it will get stacked as per your 
mobile resolution. So, the application 
has become smart enough to figure out 
that it is getting invoked from which 
device. Now, below are screen shots of 
this sample application. 



^ Opera Mobile - Samsung Galaxy S ID 


Home Page - My ASP.NET MVC Application 


I mymoviereviews.azurewebsites ■ 


Select One 










So, as you can see it has got different 
mobile user interface, and menu styling 
is also different. Also, the browser here 
I amusing to test the same is opera 
mobile browser for desktop. Other 
features like collapsible panes as shown 
ahead fits very nicely with mobile 
devices. 







On similar lines you can see other pages 
like movie and movie reviews as shown 
ahead. 



<£* Opera Mobile - Samsung Galaxy S HI 


(h) 


Leg in 


Index 

MovieName | DirectorName | ReleaseYear 

Godzilla | Gareth Edwards | 2014 
Edit | Details | Reviews | Delete 

Avatar | James Cameron | 2009 
Edit | Details | Reviews | Delete 

Titanic | James Cameron 1 1997 
Edit | Details | Reviews | Delete 

Die Another Day | LeeTamahori | 2002 
Edit | Details | Reviews | Delete 

DDU | Aditya Chopra | 1995 
Edit | Details | Reviews | Delete 









^ Opera Mobile - Samsung Galaxy S III [ <=> | B 


Delete 

Are you sure you want to 
delete this? 


MovieName 

Godzilla 

DirectorName 

Gareth Edwards 

ReleaseYear 

2014 



Back to List 



Samsung Galaxy SHI 

720x964 

PP1: 306 (□*] 

50% 





So, this was the application glimpse in a 
nutshell. So, during this entire course 
you will be learning how to build an End 
to End Application which will not only 
support desktop version browsers rather 
mobile as well. 


Creating a MVC 
Application 

I always believe to learn anything is to 
get started with the hands-on the same, 
so that way you will understand the 
practical approach of solving any 
problem statement. However, we'll be 
building a simple web app for “ Movie 


Review ” where in I'll walk you through 
all the tiny steps involved in building the 
site. So, let's get started. Before we 
begin, we must install the prerequisites 
for making this app. Now, to create a 
MVC Application, open the Visual 
Studio, click on New Project and select 
the below mentioned project as shown in 
the snapshot. 




Note: - Here am using Visual Studio 
2013 Ultimate Version. 

Now, as soon as you select the MVC 4 
web application, it will present couple 
of different application templates option 
as shown ahead in the screen shot. 



Empty Template:- Empty template will 
just have the basic folder structure that's 
it and nothing more than that. 

Basic Template:- The basic template 



will give you the MVC infrastructure in 
the solution. However, basic templates 
are for experienced MVC guys who 
want to customize the solution their way 

Internet Application:- Internet 
Application is the one which I am 
interested in as you can see in the above 
screen shot. However, it will give all the 
required dependencies in my solution 
structure to get started with my web 
application. 

Intranet Application:- Intranet 
application is the one which deals with 
Windows Authentication. So, once you 
select this option, your app gets 
automatically configured with windows 



related settings. 


Mobile Application:- Mobile 
application is the one which is included 
with MVC 4. The mobile application is 
preconfigured with JQuery Mobile. It 
helps developer to create just mobile 
sites. It includes themes which is 
supported by mobiles, touch enabled UI 
etc. 

Web API: - Web API terminology will 
be discussed in detail later in this book. 
However, for now you just need to know 
that Web API is basically a framework 
which supports creating HTTP services. 

Single Page Application: - SPA is a 



new terminology which offers building 
Single Page Application, focused mainly 
on client side interactions using tons of 
JavaScript and different JS Frameworks 
like Knockout, Durandal, Angular etc. 
This kind of web application is highly 
interactive and feature rich for ex: - 
Gmail, Outlook etc. 

Facebook Application: - Facebook 
application is I would say a kind of API 
support which offers developer to use 
the Facebook API in their application to 
build a Facebook centric website. This 
is really a cool stuff. 

Now, the next option which I have 
selected above is razor as view engine, 



so if I click on this dropdown I could 
see two options available as Razor and 
ASPX. 


View engine: 

Razor 

AS PX 

V; Create a unit test project 


I also have a habit of checking Unit Test 
Project as you can see below in the 
screen shot. So, upon checking this 
checkbox, Visual Studio will create one 
more project for me in the solution 
which is going to be Test project. Here, I 
can go ahead and write my test cases 
against any specific module or 
scenarios. 



[3 Create a unit test project 
Test project name: 

M ovi eRevi ew.T ests 
Test framework: 

I Visual Studio Unit Test »~j Additional Info 


So, when you click on the dropdown of 
Test if amework, you will see only one 
test framework in there. However, 
Microsoft has given an option to 
developers to install their friendly 
testing framework like NUnit, XUnit, 
etc. So, once these frameworks will get 
installed, this will get added in the 
dropdown box. 


How MVC Applications are 
Structured:- 


Below is the snapshot of the MVC 
application structure. This gives a brief 
idea that how your simple MVC app is 
structured initially. 



Solution Explorer 

- ‘f x 

fit t G - « ® 1 

l| A - » 

Search Solution Explorer (Ctrl+;) 

P \ 


Solution ’MovieReview' (2 projects) 


a ™ MovieReview 

> A Properties 
i> References 

App_Data 

> App_Start 

> Content 

> Wt Controllers 

> Filters 

> Images 

> Models 

> Scripts 

> 0 Views 

0 favicon.ico 
i> o5 Global.asax 
y3 packages.config 
i> Web.config 


[ 3 ] MovieReview.Tests 


> A Properties 

> References 

> li Controllers 
£3 App.config 

y!3 packages.config 


Below I have listed specific directories 
which are there in the solution and their 
meaning. 

Models:- Section containing all the 
classes related for fetching the data and 
manipulating the same. 

Views:- Section containing all the UI 
related stuffs. These are the ones which 
are going to be rendered based on 
controller's action. 

Controllers:- Section where in the 
entire controller classes are placed 
which basically handles all the incoming 
requests from the browser. 



Scripts:- Section where in all the scripts 
related stuffs are placed. 

Images:- Section where in all the 
images are placed which is used across 
your site. 

Filters:- Section where in all the filters 
are placed. We'll do deep dive usage of 
filters later in coming chapters. 

App Data: - Section where in all the 
data files are stored meant for reading 
and writing the same. 

App Start: - Section where in all 
configurable stuffs resides like Web 
API, Routing etc. 



Note: - This is basic internet app MVC 
structure. However, please note that 
MVC Framework never enforces any 
kind of folders organization. You can 
obviously customize the folders your 
way, like in many enterprise projects 
Models go in a separate class library 
project just to make sure reusability. 
However, you could do higher level of 
separation, it entirely depend on you. 


SUMMARY: - 

So, in this chapter we have just seen the 
overview of MVC, history of MVC and 
its different releases. We also 
understood that ASP.NET MVC is 


another technique of building web 
application, a completely different 
strategy rather stateless technique to 
build the web app. We have also seen 
the application glimpse which we are 
going to build right from the scratch and 
host the same on cloud. As we 
progresses module by module in 
different chapters your doubts regarding 
MVC development will be getting 
clearer. 



Chapter 2: 

Understanding 

Controllers 


WHAT DO you find in 
this CHAPTER? 


=> Introduction 


Controllers 


=> Working with your 1 st 
controller. 

=> Action Results 

=> Action Selectors 

=> Action Filters 

=> Summary 

Introduction:- 


Hi friends, I hope you have enjoyed the 
application glimpse in the last section 
and you are ready to jump start to create 


your 1 st MVC application from blank 
slate. So, basically in this section we 
will understand the concepts of 
controllers like why it is there in MVC, 
what its job and why it is often referred 
as central unit of your application. 


Controllers 

Controllers are basically nerve of 
ASP.Net MVC as it is going to be the 1 st 
recipient which is going to interact with 
incoming HTTP Request. So, controllers 
are going to decide which model is 
going to be selected, then taking the data 
from the model and passing the same to 
the respective view, hence finally view 


is going to be rendered. So, controllers 
in a nutshell are basically controlling the 
overall flow of the application taking the 
input and rendering the proper output. 

Since, we have selected internet 
template while building the application, 
so we have been presented with two 
default controllers called as 

Home Controller: - It will render the 
home page of the application. 

Account Controller: - It will render the 
Login/Registration page of the 
application. 

Below, is the sample snapshot of the 
Home controller being created by the 



Visual Studio 


using System; 

using System. Collections .Generic; 
using System. Linq; 
using System. Web; 
using System. Web. Mvc; 


namespace MovieReview. Controllers 

{ 

public class HomeController : Controller 

{ 

public ActionResult Index() 

{ 

ViewBag. Message = "Modify this template to jump-start your ASP.NET MVC 
application . "; 


return View(); 

> 

public ActionResult About() 

{ 

ViewBag. Message = "Your app description page."; 


return View(); 


} 


public ActionResult ContactQ 
{ 

ViewBag. Message = "Your contact page."; 
return View(); 

} 

> 

} 

Now, when you run the application by 
clicking F5 button, it will simply render 
the Home view with the above welcome 
message printed on screen as shown 
below in the snapshot. 



We suggest the following: 
Getting Started 


e 

e 




Find Web Hosting 


However, you can verify the same by 
putting one debug point in the home 
controller and see how the control is 
flowing and how view is getting 
rendered over here. 


HomeController. 

MovieReview. 


-|® IndexQ 


public class HomeController : Controller 

{ 

public ActionResult Index() 

ViewBag. Message = "Modify this template to jump-start your ASP.NET MVC application."; 
return View(); 


public ActionResult About () 

{ 

ViewBag. Message = "Your app description page, 
urn View( ) ; 

lublic ActionResult Contact() 

ViewBag. Message = "Your contact page."; 
rum View( ) ; 


> 


> 


i Watch 1 Find Results 1 Find Symbol Results 


ndow Immediate Window Output 


Now, when you run the application, you 
will see that control has hit the break 
point and then it rendered the 
corresponding view with the above 
details and the static details which is 
mentioned in the view. 




II.' I- '-. I’ • -• 

MovieReview.Controllers.HomeController *|© IndexO 

using by s tea. Web; 

[using System. Web. Mvc; 

B namespace MovieReview. Controllers 

|{ 


B public class HomeController : Controller 

I { 

B public ActionResult Index() 

• | a 

O ViewBag. Message = "Modify this template to jump-start your ASP.NET MVC application."; 

return View(); 

} 


public ActionResult About() 

{ v ^ ^ ^ d 
return View(); 


B public ActionResult Contact() 

{ 

ViewBag. Message * "Your contact page."; 
return View(); 

} 

> 

100% -| < 


We'll discuss View in more detail in the 
next chapter. But for now just understand 
that Home Controller's Index action is 
going to return the Index View under the 
Views ' Home directory. There is one 
more important point to notice here, that 
development box is running on the IIS 


Express. 



IIS Express Symbol in the 
taskbar. 


Now, when you right-click on IIS 
Express you will see the currently 
running application on it and the random 
port which is allotted to it. 


View Sites 


MovieReview 

► 


Show All Applications 
Exit 


Browse Applications 

http://localhost:1033/ 

Stop Site 


IIS Express is basically development 




version of Visual Studio which comes 
with Visual Studio 2012+ platform It 
allocates random port for your website. 
In our case this is http ://localhost: 1033/ . 


Working with your 1st 
Controller: - 

Let's get started by creating your 1st 
controller. This controller will simply 
search movies. Then, subsequently we'll 
start adding some more features to the 
item displayed on the screen like when 
you click on the movie; corresponding 
movie details will flash on screen. 
However, it's worth time spending to 
understand the routing before jumping to 


write our 1st controller. Obviously, 
we'll do deep dive about routing in 
routing chapter. But, 1st let's understand 
few basic concepts of routing. 

One of the core questions which you 
must be thinking that how ASP.Net MVC 
knows to load the index action when the 
URL http://localhost: 1033/ is invoked, 
and the answer lies in the routing engine. 
The Routing Engine is the core concept 
of the ASP.Net MVC; it's not coupled 
with MVC Framework. Why am saying 
this, because we can use the routing 
engine to route the request for Web 
Forms, WCF Services etc. But, here in 
MVC we use this routing engine to 
redirect request to our controllers. In 



order to execute the same, we give the 
routing engine a map to follow using 
“MapRoute” API. 


routes .MapRoute ( 

name: "Default", 

url : "{controller}/{action}/{id}", 

defaults: new { controller = "Home", action = "Index", id = 

UrlParameter.Optional } 

); 


So, basically what a route map does, it 
provides a friendly name to the route, a 
pattern to follow and default parameters 
for the route. So, if you think about the 
job of the routing engine, its job is pretty 
simple. Its job is to examine the URL 
and figure out where to send the request 
for processing. When, it examines the 
URL, it picks up the little pieces from 
the URL which tells the routing engine, 
where to send the request. In an MVC 


Application framework, we provide 
nomenclature 

“ Con tr oiler /A cti on/I d(som edata) ” . So, 
if the routing engine doesn't find the 
specific piece of data inside the URL, 
like controller name or action name, then 
it can use the default values assigned in 
the Map. In the above piece of code, it is 
“Home” controller and “Index” action 
are default values. Now, there are 
certain application level settings which 
are predefined in “Global.asax” file. 
This file is really interesting file in 
ASP.Net. It derives the application. 
Below is the sample code of this 
GlobaLasax file. 



public class MvcApplication : System. Web. HttpApplication 

{ 

protected void Application_Start( ) 

{ 

AreaRegistration . RegisterAllAreas( ) ; 


WebApiConfig. Register (Globa lConfigu rat ion .Configuration); 
FilterConf ig. RegisterGlobal Filters (GlobalFilters . Filters) ; 
RouteConf ig . Register Routes ( RouteTable . Routes ) ; 

BundleConf ig. RegisterBundles( Bund leTable. Bundles ) ; 
AuthConfig. RegisterAuth( ) ; 

} 

} 

Here, you can see that this class is 
derived from http application and this 
allows us to drill into some application 
level events like “Application Star f\ 
So, this method will be processed by 
ASP.NET, before you process your 1 st 
http request. So, it means when your 
application starts running, the code here 
will execute one time before any 


controllers start executing. So, this is the 
place where in we put some 
configuration related changes for 
example Routing Configuration. The 
route configuration is done by 
“RouteConfig.RegisterRoutes(RouteTabli 
So, here we are going to pass the routing 
table also known as “ Global Routing 
Table ”, values which contain all the 
routes for the entire application. This 
table will be empty initially, but when 
we call routes, it will add entries in the 
routing table. Now, let's inspect the 
values inside the route collection. 


public ActionResult Index() 

{ 

var Controller = RouteData .Valuesf'controller"]; 
var Action = RouteData. Values ["action"]; 
var Id = RouteData. Values ["id"]; 

string Output = string. Format ("Controller = {0}, Action= {1}, Id= {2}”, 
Controller, Action, Id); 

ViewBag. Message = Output; 

return View(); 

} 

Now, when I build the solution and run 
the app, it will produce me the below 
result. 


Home About Contact 



suggest the following: 



sophisticated applications that use the latest web standards. I earn more... 


© 




Now, if you see the above screen shot, it 



presented the Controller's name and 
Action name. However, if you see that Id 
field is blank here, because while 
running the app, I have not invoked the 
app with any parameters, hence Id field 
is blank. However, there are other ways 
as well to grab these values. We'll see 
the same in some time. 

Now, in this application I would like 
segregate my custom route with the 
default Route. So, let's go to 
“ RouteConfig.es ” file under 
“ AppStart ” folder. Here, am going to 
write my custom route. However, before 
jumping directly to write a new route, 
let's 1 st understand, why it is required to 
write another one when already default 



route is there. Consider a scenario 
where in any user comes in and search 
for a movie say “Movie/Avatar” . In this 
case, Avatar will be treated as 
parameter name not like action method, 
so in this kind of scenario our default 
route won't work significantly 

So, in order to fix the same I'll write 
below route. Also, route placement is 
equally important. Because “ Default 
Route ” is very greedy, it matches almost 
any pattern. Note that route works on the 
principle first match wins, so, it's 
always suggested to place your new 
route in front of the default route. Also, 
as per MVC convention route name has 
to be unique. So, two routes cannot have 



the same name. 


/ /Movie/ Avatar 

routes . MapRoute( "Movie" , 

"Movie/{name}", 

new { controller = "Movie”, action = "Search", name = "" }); 


Now, with this new route in place, let's 
build the app and try to navigate 
( http.V/localhost: 1033/Movie/Avatar ) to 
the above mentioned URL and see the 
result. 


<- C Q Iocalhostl033/Movie/Avatar 

Server Error in '/' Application. 


Well, the above result was obvious; 
because I told to go and find out the 
“ Movie Controller ”, but since I have not 


created the movie controller yet, hence it 
presented me the 404 error. Now, let me 
go ahead and create my 1 st controller. 
Right-Click the controller's folder and 
say add new controller and then give the 
name as Movie Controller 



Now, as you can see in the above screen 
shot I have added Movie Controller as 
an empty MVC controller. I took this 
liberty to write the entire code right from 
the scratch in front of you. So, the code 
for the same looks like as shown below. 
However, in the coming chapters we'll 
learn the usage of other scaffolding 
techniques listed in the dropdown. 



Now, here in the above screen shot as 
you can see that it created the default 
action method with the name “Index”. 
However, I have designed the route in 
such a way that it will look for “ Search ” 
action by default. Hence, let me go 
ahead and rename the Index action to 
Search action. Also, instead of returning 
view for now I'll just return Content so 
that I don't have to create view 
necessarily and also my purpose is 
served. 


^ MovieReview.Controllers.MovieController -| 0 SearchQ 

Busing System; 

using System. Collections. Generic; 
using System. Linq; 
using System. Web; 
using System. Web. Mvc; 

B namespace MovieReview . Controllers 

{ 


B public class MovieController : Controller 

{ 

a // 

// GET: /Movie/ 

|r public ActionResult Search() 

{ 

return Content( "Returned from the Search Action from the Movie Controller”); 

} 

> 

[} 


So, now when I build the page and 
refresh the same, it will simply return 
me content on the browser. 


^ C lL localhost:1033/Movie/Avatar 

Returned from the Search Action from the Movie Controller 


Now, let's think on how to fetch the 
incoming value from the browser when 


parameter is getting passed in. However, 
there are couples of ways to fetch the 
route data from the URL, one way which 
I explained earlier in this chapter using 
the “ RouteData ” data structure and grab 
the value for the same. However, MVC 
framework also provided simple way to 
address this problem and that is by using 
the parameter inside the action method. 

So, if you add a parameter to this 
method, what MVC framework will do, 
it will go and look for the value that 
matches the parameter name and it return 
it to you. Basically, it will apply all the 
permutation and combination to find out 
the parameter value for you, it will 
search in the Route data; it will also 



inspect the query string and in the form 
posted value. So, in this case 
“/Movie/ Avatar ” , MVC framework will 
decide that I need a parameter with 
“User Input”, and then this will get 
picked from the URL and that will get 
automatically passed in to me. 


^ MovieReview.Controllers.MovieController - 1 0 Search(string name) 

E using System; 

using System. Collections. Generic; 
using System. Linq; 
using System. Web; 
using System. Web. Mvc; 

E namespace MovieReview. Controllers 

{ 


El public class lcvieController : Controller 

{ 

B // 

// GET: /Movie/ 


public ActionResult Search (string name) 



return Content(userinput); 

} 


} 


> 


Here, as you can see in the above 
screenshot in order to sanitize the user 
input I have used 

“ Server.HtmlEncode ”, this will simply 
convert any kind of malicious script in 
plain text. If I would have been returning 
the same in view, it could have been 
automatically taken care for me. But, 
since I am returning the same with 
content view, hence I need to return the 
sanitized input to prevent any kind of 
scripting attack. Now, when I build and 
refresh the same, it will present me the 
below output. 

C Q localhost:1033/movie/Avatar 


Avatar 


You can also inspect the value for the 
same as well. 


RouteConfig. 

cs 

Global. 



MovieReview.Controllers.MovieController 
Busing System; 

using System. Collections. Generic; 
using System. Linq; 
using System. Web; 
using System.Web.Mvc; 

□namespace MovieReview. Controllers 

| { 

□ public class HovieController : Controller 

! ( „ 

// GET: /Movie/ 


public ActionResult Search(string name) 

{ 

■l/.l Ji.. ild.u.'.liui iH 

Return Conti 6* userinput Q. * "Avatar" o- 

} 


} 

[> 


However, in the current scenario if I 
remove the parameter name and then 
invoke the URL that will work fine as 
shown below. 






<- CD localhost:1033/movie 


Reason for this is the default value of the 
route, in the route I have mentioned 
“ name= ””” which means if nothing is 
getting passed in, then simply pass in the 
empty value as default parameter value. 
However, if I remove the name 
parameter from the route and then build 
and refresh the page, then it will result 
me error as shown below. 

//Movie/Avatar 

routes .MapRoute( "Movie", 

"Movie/{name}'', 

new { controller = “Movie", action = "Search"] }); 


Server Error in '/' Application. 


The resource cannot be found. 


So, in order to fix this I can go ahead 
and allow optional parameters for the 
parameter value as shown below. 


//Movie/ Avatar 
routes. MapRoute( "Movie”, 

”Movie/{name}", 

new { controller = "Movie", action = "Search" J name=UrlParamete''. Optional }); 


What this is doing that it just ensuring 
that even if the parameter didn't mention 
in the url, it's ok it will not result 404 
error, it will just print out the empty 
result. Also, in order to prove the point 
that MVC framework looking for the 
parameter values at different locations; 
let me try one example with query string. 


<- -¥ G D localhost:1033/movie?name=Avatar 


Avatar 


We can also provide certain default 
values if nothing is passed in as 
parameter in the URL. In that case, it 
will simply return the default value on 
the screen as shown below. 


| MovieReview.Controllers.MovieController O Search(string n 

Busing System; 

using System. Collections. Generic; 
using System. Linq; 
using System. Web; 
using System.Web.Mvc; 

- namespace MovieReview. Controllers 

It 

0 references 

B public class MovieController : Controller 

{ 

B // 

// GET : /Movie/ 

0 references 

public ActionResult Search(string name=”Empty Value") 

t 

var userinput = Server . HtmlEncode(name) ; 
return Content (userinput); 

} 

} 

> 


4- ClI localhost:1033/movie 


Empty Value 


Action Results:- 


Now, let's move forward and see 
different kinds of Action result. So, 
Actions basically returns different type 
of Action Results. I have put one brief 
table explaining different kind of action 
results and its behavior. We'll check 
them in detail with example shortly. 


1 Name 

Behavior 

C out entRe suit 

Returns a string 

F ileContentResult 

Returns file content. 

FilePatkResult 

Returns file content. 

FileStreamResult 

Returns file content. 

EinptyResult 

Returns nothing. 

JavaScriptResult 

Returns script for execution. 

JsonResult 

Returns JSON formatted data 

RedirectT oResult 

Redirects to the specified URL. 

HttpUnauthorizedResult 

Returns 403 HTTP Status code. 

RedirectT oRouteRe suit 

Redirect to different action' different 
controller action. 

ViewResult 

Received as a response for view engine. 

PartialViewResult 

Received as a response for view engine. 


Here, the 1 st column represents a type 
which is derived from the Action Result. 



Now, let's do some demo on the above 
representations. 


I I MovieControllef.es' * ' ESSIZ^H 

MovieReview.Controllers.MovieController -|P Search(string name - ‘Empty Valued 

Fusing System; 

using System. Collections. Generic; 
using System. Linq; 
using System. Web; 
using System. Web.Mvc; 


□ namespace MovseReview.Controllers 





So, here in the above screen shot when 
you see the intellisense, you will see all 
different kind of redirect results. Now, 
let me consider one and redirect to my 
blog ( http ://mwiew. rahulnivi. net ) . So, 
Now when I invoke this URL 
( http .'//local host: 1 033/movie ), it will 


redirect me to my blog page as shown 
below. 



I could also redirect to actions for the 
same controller or even for a different 
controller. Also, I can pass in values to 
the controller's action method if any 
required by that particular action method 
call. Below, is the simple example for 
the same. 




Search(string 


*5 MovieReview.Controllers.MovieController 
Busing System; 

using System. Collections. Generic; 

; using System. Linq; 
using System. Web; 
using System. Web. Mvc; 

B namespace MovieReview. Controllers 

{ 

O references 

B public class MovieController : Controller 

{ 

B // 

// GET: /Movie/ 


public ActionResult Search(string name="Empty Value”) 

{ 

var userinput = Server. HtmlEncode( name); 
return RedirectToActionC’Index", "Home"); 

}| 


> 


} 


Now, when I build and refresh the page, 
it will redirect to the home page. 
However, in case if you need to build a 
URL, where in you need to pass few 
values, obviously you could do that 
MVC framework provides you an option 
to do that. Below, is the sample one 
explaining the same. 


-|$> Search(string i 




MovieReview. Controllers. MovieController 


Busing Sy: 

| using Sy: 

] using Sys 
| using System 
| using System 


Bnamespace MovieReview. Controllers 

It 

El public class MovieController : Controller 
{ 

// GET: /Movie/ 


B public ActionResult Search(string name="Empty Value”) 

{ 

var userinput = Server. HtmlEncode(name) j 

> ( * . { P Y }> ' 


} 


} 


Now, here in the above screen shot, you 
could see that I have passed the values 
as anonymous type which is going to be 
present in the URL. So, there could be 
many scenarios in real world 
application, where in you need to pass in 
single or multiple values with action so 
that same values can be grabbed and 
utilized at that place. Now, when I build 
and invoke the URL 


( httpV/localhost: 1 03 3 /movie/ Avatar ) . 
This will produce me the below result 
with the modified URL 
( http.V/localhost: 1033/? 
name=Avatar&myName=Rahul%20Sah( 
having the values present in the query 
string. 




However, we can also do something like 
directly redirecting to a route as shown 
below. 


MovieController.i 


MovieReview.Controllers.MovieController ■ | © Search(string name = "Empty Value") 

Busing System; 

using System . Collections .Generic ; 
using System. Linq; 
using System. Web; 
using System. Web. Mvc; 

F namespace MovieReview. Controllers 

|{ 

B public class MovieController : Controller 

{ 

B // 

// GET: /Movie/ 


E public ActionResult Search(string name="Empty Value") 

{ 

var userinput - Server. HtmlEncode( name); 

return RedirectToRoute(" Default", new { controller = "Home", action = "Contact" }); 

> 


} 

I 


> 


Now, when you try building and invoke 
the url 

( http: / /localhost: 103 3/movie/ Avatar ), it 

will land up on the Contact page as 
shown below. 


Home About Contact 


Contact. Your contact page. 


Phone 

Main: 425.555.0100 


Email 


Address 


Now, let's try to work with files, let's 
suppose that you need to return a 
physical file stored in the file system. 
Then, how do you achieve the same. 
That is also very simple; remember the 
table which I have shown above, you 
can easily return any kind of physical 
files from the file system. Here, for 
explaining I am just picking one of the 
CSS files stored in themes folder. 


*5 MovieReview.Controllers.MovieController 


Busing System; 

using System. Collections. Generic; 
using System. Linq; 
using System. Web; 
using System. Web. Mvc; 


MovieController.es - 


-|Q Search(stringni 



:= "Empty Value") 


Bnamespace MovieReview. Controllers 

|I 


public class MovieController : Controller 

{ 

// 

// GET: /Movie/ 


B public ActionResult Search(string name=" Empty Value”) 

{ 

var userinput = Server. HtmlEncode(name); 

return File(Server.MapPath(“~/Content/themes/base/jquery-ui.css”), ”text/css”); 

> 


}| 


> 


In the above case, I have used map path 
method just to map the virtual path of the 
file system, basic C#; nothing rocket 
science. Now, when I build and refresh 
the page, then it will return me the 
physical file. 





<- CD localhost:1033/movie 


/*! j Query 01 - vl.8.24 - 2012-09-28 

* https : // github . com/ j query/ j query-ui 

* Includes: j query. ui. core. css, jquery.ui. accordion. css, j query. ul. auto complete. css, j query. ui. button. css, 
jguery.ui.progressbar.css, jquery.ui. resizable. css, jquery.ui. selectable. css, jquery.ui. slider .css, jquery 

* Copyright (c) 2012 AUTHORS . txt; Licensed MIT */ 

/* Layout helpers 


. ui-helper-hidden { display: none; } 

.ui -helper-hidden-accessible ! position: absolute ! i m portant; clip: rect(lpx lpx Ipx Ipx) ; clip: rectflpx, 
.ui -helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; 
•ui-helper-clear£lx:before, .ui-helper-clearflx: after < content: display: table; } 

■ui-helper-clearfix: after 1 clear: both; ) 

■ui-helper-clearfix ( zoom: 1; ) 

.ui-helper-zfix < width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter :Alpha 


/* Interaction Cues 


•ui-state-disabled ( cursor: default ! important; } 


.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } 
/• Misc visuals 




■*/ 





context, 



return 



:h( string na«e-"E«pty Value") 





public ActionResult Searc 
{ • t - Se HtmlE od ( ) 



userinput ), JsonRequestBehavior.AUowGet)j 


Now, when you build and refresh it will 
produce you the JSON result as shown 
below. 


<- C D localhost:1033/movie/Avatar 

{ "Fnarce" : "Rahul", "Lname" : "Sahay", "MovieSelected" : "Avatar" } 


So, this was few of the action results 
demo. Obviously you can go ahead and 
experiment with others as well. 


Action Selectors:- 
Action Names 
Accept Verbs 

Action Selectors play crucial role when 
you are writing your action methods. 
These, selectors will decide the 
behavior of the method invocation based 
on the modified name given in front of 
the action method. So, basically this 
attribute we usually use when we want 
to alias the name of the action method. 
So, now this action cannot be reached 
with the name Search, it will now reach 
with the name “ Edit ”. If you try reaching 
the action method with “ Search ”, this 
will return a 404 as routing engine won't 


be able to resolve the request. This 
approach we also take to make more 
user friendly Action name. 


[ActionName(”Edit")] 

public ActionResult Search(string name = “Empty Value") 
var user-input = Server. HtmlEncode(name); 

return lson(new { Fname - “Rahul", Lname = “Sahay", MovieSelected - userinput }, IsonRequestBehavior.AllowGet); 

} 

Now, Accept Verbs are terminology 
which will take care of HTTP Verbs. So, 
you could basically restrict an action 
method based on the Http Verbs like you 
can say, that this action method is only 
reachable when HTTP-POST/HTTP- 
GET request is being issued. Below I 
have mentioned the snapshot of all the 
HTTP Accept verbs via Visual Studio 
intellisense. So, you can obviously play 
around these verbs based on your 


requirement. 


[h«] 

tp*B 

p*S HttpGet 
{ ^5 HttpHead 
*5 HttpOptions 
*ij HttpPatch 
HttpPost 
HttpPut 


j class System.Web.Mvc.HttpDeleteAttribute 
Represents an attribute that is used to restrict an action method s 
DELETE requests. 


' that the method handles only HTTP 


"Sahay", MovieSelected = 


trinput }, JsonRequestBehavior .AllowGet); 


Now, in order to explain the distinction 
between these Accept Verbs, let me 
make a small change in the action 
method. Below, if you see I have 
annotated the action method with 
HttpPost method. 


MovieContrdler.es ■ liWWgffffflWBM 

*: MovieReview. Controllers. Movie Controller »|0 S earch(«ring name = "Empty Value") 

using System; 

using System. Linq; 
using System. Web; 

[using System.Web.Mvc; 


B pa 

B public class MovieController : Controller 

I { 


// GET: /Movie/ 

[HttpPost] 

public ActionResult Searchfstring name=“ Empty Value") 



MovieSelected * userinput }, 3sonRequest8ehavio , '.Allow6et); 


So, now when I build and refresh the 
page, it will return me 404 error, 
because MVC framework could find an 
action method which is there in the 
controller equivalent to HttpGet request. 


<- -* C _i localhost:i033/movie/Avatar 


Server Error in '/' Application. 


The resource cannot be found. 


Now, in order to fix this scenario we can 


have the same action method but this 
time annotated with the HttpGet as 
shown below. 


Busing System; 

using System. Collections. Generic; 
using System. Linq; 
using System. Web; 
using Sy stem. Web. Mvc; 


Ti * f 

B public class MovieController : Controller 

I { 


1 1 GET: /Movie/ 

[HttpGet] 

public ActionResult Search(string name = "Empty Value”) 

{ 

var userinput = Server. HtmlEncode(name); 

return D son (new { Fname = "Rahul”, Lname = "Sahay", MovieSelected 


userinput }, IsonRequestBehavic-.AllowGet); 


:> 


> 


Now, when I build and refresh, I should 
get the desired result back. 

4- -> C Q localhost:1033/movie/Avatar 

{"Fname" : "Rahul", "Lname" : "Sahay", "MovieSelected" : "Avatar"} 


However, let's understand why this is 
important to use the Accept Verbs. For a 


moment let's assume you have another 
action with the same name as shown 
below. 


using Sy- 
using Sy- 
using Sy- 


ollec 


i.Linq; 
eb.Mvc; 

3 namespace MovieReview. Controllers 

public class MovieController : Controller 

{ 

// 

// SET: /Movie/ 

public ActionResult Search(string name = "Empty Value”) 

fl 

var userinput = Server. HtmlEncode(name); 

return 3son(new { Fname = “Rahul", Lname = "Sahay”, MovieSelec 

> 


public ActionResult Search() 

{ 

return 3 son (new { Fname = "Rahul", 


equestBehavio- .AllowGet); 


Now, when you build the same it will 
build successfully. However, when you 
refresh the page, it will result the below 


error. 




*■ Cl'] localhosC1033/ 


Server Error in '/' Application. 

The current request for action 'Search' on controller type 'MovieController' is ambiguous between the following action methods: 
System. Web.Mvc.ActionResult Search ( System, String ) on type MovieReview.Controllers.MovieController 
System. Web. Mvc.ActionResult Searchf) on type MovieRe view. Controllers. MovieController 



Now, when you look at the error, this is 
very obvious as it says MVC framework 
unable to figure out which action method 
should be picked up for the get request. 
So, in order to rescue us from these 
kinds of scenarios, Accept Verbs come 
in action. Now, in order to get rid of the 
error, just annotate the same with 
different Accept verbs as shown below. 


public Actio 


t Search (string name = "Empty Value") 
tmlE ncode ( n ame ) ; 


return 3 son (new { F 

> 

[HttpGet] 

public ActionResult Search() 
{ 

} 


Now, when I do build and refresh, error 
should have gone now. 


<- C u localhost:1033/movie/ 

{"Fnarce" : "Rahul", "Lnair.e" : "Sahay") 


So, this was the basic demo for Accept 
Verbs. Now, let's go ahead and see 
Action Filters. 


Action Filters:- 


Above we have discussed about Action 
Selectors. Apart from action selectors, 
there is one more topic which is equally 
important, that is Action Filter. Below, I 
have mentioned their usage in brief. 


1 Name 

Behavior 

Authorize 

Actions are restricted to allow only 
authorized users. 

Validatelnput 

Allow all kind of input. 

OutputCache 

Caches controller's output. 

HandleError 

User can specify custom views for handling 
different kind of exceptions. 

Validate AntiForgery Token 

Prevent Cross site scripting. 


So, basically by definition filters are the 
one which apply pre/post processing 
logic to a controller action. We'll do 
deep discussion about these filters in 
coming chapters. 



Summary:- 


In this chapter, we discussed controller's 
job and also that how controller controls 
the nerve of the application. We see 
many things like basics of controller, did 
some debugging with the controllers, 
discussed routing in brief. We also 
discussed Action Results, Action 
Selectors and Action Filters. I have 
covered these topics here in controller 
to keep the things really simple; because 
as we progresses with different 
chapters, these topics will be used 
immensely in designing the application. 


Chapter 3: Views 

WHAT DO you find in 
this CHAPTER? 


=> Introduction 
=> Views 

=> Syntax of Razor Views 


=> How to Prevent Cross 
Site Scripting Attack 

=> More on Razor Syntax 

=> Layout Views 

=> HTML Helpers 

=> 

HTML.ValidationSummc 

=> Some more HTML 
Helpers 

=> Partial Views 
=> Viewbag and Viewdata 
=> Summary 



Introduction:- 


So, basically Razor View engines are 
responsible for creating HTML Outputs. 
Razor views are nothing but files ending 
with “.cshtmF extension. So, if I have 
to summarize Razor in one step I would 
be doing like shown below 

“ Static Template + Model Data = 
Produced HTML ” 

So, the above formula says that you have 
a template in which with the help of C# 
code you are going to inject data pieces 
somewhere in between the markup. And 
the final output which renders is going to 
be the combination of static HTML plus 


the data fetched from the database or 
from any other remote resources. Now, 
let's look at the same in Visual Studio, to 
make the above description more robust. 


Views 

So, imagine a scenario that at a section 
of page, I would like to have latest 
reviews pulled in from the database. For 
now, we won't be working with 
database; we'll fetch from database in 
the coming chapters. But, for now we'll 
use some hard coded values in order to 
prove my point. So, now let me go ahead 
and create one controller with the name 
‘ L Mo vie Re views ” . 



Now, this time I have selected a 
different option from scaffolding 
dropdown. Now, this scaffolding 
template will create an Index method 
with default action for controller. 
However, this will also list other 
methods like Edit/Delete/Create a 
review as well. 



using System; 

using System. Collections .Generic; 
using System. Linq; 
using System. Web; 
using System. Web. Mvc; 

namespace MovieReview . Controllers 

{ 

public class MovieReviewsController : Controller 

{ 

// 

// GET: /MovieReviews/ 

public ActionResult Index() 

{ 

return View(); 

> 

// 

// GET : /MovieReviews/Details/5 

public ActionResult Details(int id) 

{ 

return View(); 

> 

// 

// GET: /MovieReviews/Create 

public ActionResult Create() 

{ 

return View(); 

} 

// 

// POST: /MovieReviews/Create 
[HttpPost] 

public ActionResult Create(FormCollection collection) 

{ 


try 



{ 


// TODO: Add insert logic here 


return RedirectToAction( "Index") ; 

} 

catch 

{ 

return View(); 

> 


// 

// GET: /MovieReviews/Edit/5 

public ActionResult Edit(int id) 

{ 

return View(); 

} 

// 

// POST: /MovieReviews/Edit/5 
[HttpPost] 

public ActionResult Edit(int id, FormCollection collection) 

{ 

try 

{ 

// TODO: Add update logic here 
return RedirectToAction( "Index" ) ; 

> 

catch 

{ 

return View(); 

> 


// 

// GET: /MovieReviews/Delete/5 

public ActionResult Delete(int id) 

{ 

return View(); 

} 


// 

// POST : /MovieReviews/Delete/5 


[HttpPost] 

public ActionResult Delete(int id, FormCollection collection) 
{ 

try 

{ 

// TODO: Add delete logic here 
return RedirectToAction( "Index" ) ; 

} 

catch 

{ 

return View( ) ; 

} 

> 

} 

} 

Now, here in the index action we are 
going to list the reviews. But, currently 
we are not having any model class with 
which this action can be wired up and 
produce the result. Hence, 1 st I need to 
create one model class for this and 


properties to that as shown below. 



Now, in Movie Re views Controller I'll 
put some static data in there, so that 
same can be used to produce the result in 
views. Please note currently in this 
context I am not focusing on data access, 
am just focusing on the views. 

static List<MovieReviews> _movieReviews = new List<MovieReviews> 
{ 


new MovieReviews{ 


L 

new 


}, 

new 


Id=l, 

MovieName="Avatar " , 
ReviewerName="Rahul Sahay", 
ReviewerComments=" Excel lent " , 
ReviewerRating=5 

MovieReviews{ 

Id=2, 

MovieName="Titanic", 
ReviewerName="Rahul Sahay", 
ReviewerComments=" Excellent", 
ReviewerRating=5 

MovieReviews{ 

Id=3, 

MovieName="Die Another Day", 
ReviewerName=" Rahul Sahay", 
ReviewerComment s=" Excel lent ", 
ReviewerRating=5 


> 


Now, I have a static list of data to work 
with the view. Now, I need to use the 
same in my index action. So, this is just 
basically a work around till we get the 
database up and running. 

public ActionResult Index() 

{ 

var model = from m in _movieReviews 
orderby m.MovieName 
select m; 

return View(model); 

> 

So, now in the above snippet, I am just 
accessing the static data via LINQ query. 
Now, let's build the application and run 
the same, then it will present me the 
below error. 


* C 


Server Error in '/’ Application 


The view 'lode*' or its mister wjs not found or no view engine supports the seerehed locetions. The following loeehons were seerched 
~/Views/MovieReviews/lndex.esp* 

•’/Views/MoviePe views/ Index . esc* 

-/Views/Shered/lndex. tspx 
-/Views/ Shered/lndex.escx 
-/Views.'MoviePeviews/lndex.cshtmi 
-/Vlews/MoviePeviews/Index , vootmi 
-/Views/Shered/lndex cshtml 
-/Views/Shered/lndex. vDhtml 



So, what we done here we asked the 
MVC runtime to render an Index view 
for MovieReviews, but MVC runtime 
couldn't find the one matching the above 
extensions at different locations. So, in 
order to fix the same, I need to create a 
view for it. Now, what I'll do is I'll 
right-click on the action method and say 
Add View and this time I'll create the 
strongly typed view as shown below in 
the dialog box. 


View 

Inde* 

View fftgine 

HTMU 

■/ Create a jtrc*»g*y-typed view 
Mo<*« clots; 

M©vieR*v»ew» (Moweftevtew.Modeh) 

S< eft old templet c 

list * J gefetence script hb*an«s 

at a partial view 
J Use a layout o* matte* pe$e 

(Lea.-e empty if it « vet m a Razo* .viewstert Me) 


&M | C«x«< 


Also, I have selected List from the 
Scaffolding template. What this 
scaffolding template will do, it will emit 



the HTML markup in List fashion. 

Below, is the default code which is 
generated by the scaffolding template. 

ghiodel IEnumerable<MovieReview. Models. MovieReviews> 


II 

ViewBag. Title = "Index"; 


<h2>Index</h2> 

<P> 

@Html. Action Link ( "Create New", "Create") 

</p> 

<table> 

<tr> 

<th> 

@Html .DisplayNameFor(model => model .MovieName) 

</th> 

<th> 

@Html .DisplayNameFor(model => model . ReviewerName) 

</th> 

<th> 

@Html .DisplayNameFor(model => model . ReviewerComments) 

</th> 

<th> 

@Html .DisplayNameFor(model => model. ReviewerRating) 

</th> 

<thx/th> 

</tr> 

§foreach (var item in Model) { 

<tr> 

<td> 

@Html .DisplayFor(modelItem => item. MovieName) 

</td> 

<td> 

@Html .DisplayFor(modelItem => item. ReviewerName) 

</td> 

<td> 

@Html .DisplayFor(modelItem => item. ReviewerComments) 

</td> 

<td> 

@Html.DisplayFor(modelItem => item. ReviewerRating) 

</td> 

<td> 

gHtml .ActionLink("Edit", "Edit", new { id=item.Id }) | 

@Html .ActionLink("Details", "Details", new { id=item.Id }) | 
@Html .ActionLink("Delete", "Delete", new { id=item.Id }) 


</td> 

</tr> 

> 

</table> 

Scaffolding template is something which 
gives you boiler plate code means 
starting point, Visual Studio is smart 
enough to decide the view structure 
based on the model you created. It does 
the mapping accordingly. Now, in the 
above snippet, you could see that 
variable “item” is getting looped and 
producing individual item in the List 
format. Also, since the above code is 
generated by the visual studio, you could 
easily customize the template based on 


your need. Visual Studio doesn't restrict 
you to change the styling or labeling of 
the template generated. Now, if you see 
the folder structure, one more folder has 
been created with the name 
Movie Reviews under Views folder. 

^ Views 

> Account 

l> Home 

a Movie 

[@] Index.cshtml 
a MovieReviews 

[@] Index.cshtml 

> Shared 

[@] _ViewStart.cshtml 
Web.config 


Now, at the top of the index view, when 
you inspect the code; you will find that 


index view is strongly typed 

(Smodelf IEnumerable<MovieReview. Models .MovieReviews> 


With the IEnumerable of 
Mo vieRe views; it is going to return a 
collection of Movie reviews and 
obviously will build one table to display 
it. Now, when I build and refresh the 
page, I will be having the desired output. 


Index 



Syntax of Razor Views:- 


Now, let's understand razor job. So, if 
you remember the View formula which I 
have introduced during the introduction 
of this chapter, Views are nothing but a 
combination of static template or string 
literals with data. In our case static 
template is HTML table presentation on 
the screen and injected data inside the 
table is the model which we passed in. 
Literal text over here is H2 tag which 
we have on the page or some sentence or 
word which you are writing on the page. 
You could obviously change the headers 
on the page; to make it more descriptive 
or meaningful like shown below. 

<h2>Movie Reviews</h2> 

Now, when I just save the file and 


refresh the browser, this will take effect. 


Movie Reviews 



Now, as far as C# code is concerned, 
this must be prefixed with @ symbol. 
Now, let's suppose, in between the string 
literals, you would like to inject 
incoming data, then in that case we need 
to make use C# code to fetch the 
incoming model data as shown below. 

Hello Reviewer , We are having @Model .Count( ) Reviews. 


Now, after saving when I refresh the 


page, it would produce me the below 
output. 


Movie Reviews 





So, with the above snippet in place, 
razor easily figured out ok that's a server 
side invocation, hence pulled in the 
value from the model supplied and hence 
presented on the browser. There are 
other things apart from the Model as 
well, which you could access from 
@symbol like ViewBag, ViewData etc. 
you can put the value in either of these 


and can easily access the same in the 
razor view. We will talk about these 
ViewBag and ViewDatalater in this 
chapter. 


How to prevent Cross Site 
Scripting Attack: - 

Now, let me explain one more thing, if 
you remember from the controller's 
chapter, I said that if values are getting 
passed on to Razor views, those values 
are by default HTML encoded, you don't 
have to HTML Encode the data, but in 
case other than razor view, you need to 
be careful. Now, let's consider a 
scenario where a malicious user sitting 


on the browser sends a request with 
script inside as shown below 

"<script>aLert( 'You are hacked! ' )j</script>" 


In order to demonstrate the same, let me 
modify the incoming model data as 
shown below 

static List<MovieReviews> _movieReviews = new List<MovieReviews> 

{ 

new MovieReviews{ 

Id=l, 

MovieName="Avatar" , 

ReviewerName="Rahul Sahay", 

ReviewerComments=" Excel lent". 

Reviewer Rat ing=5 

}, 

new MovieReviews{ 

Id=2, 

MovieName= , ’Titanic", 

ReviewerName=" Rahul Sahay", 
ReviewerComments="Awesome", 

ReviewerRating=5 

}, 

new MovieReviews{ 


Id=3, 

MovieName="Die Another Day", 

ReviewerName="Rahul Sahay", 

ReviewerComments="<script>alert( 'You are hacked! ' ) ;</script>", 
ReviewerRating=4 

} 

>; 

Now, let me build and refresh the page. 


Movi* Rcvicwj 





As you can see in the above screen shot, 
that the injected script tag and its value 
has been automatically sanitized by the 
razor view engine. So, it took the value, 
HTML Encode the same and then sent to 
the browser, hence script gets converted 


to plaintext. So, let's suppose the 
scenario, if razor would not have taken 
care this, this screen would have been 
ended into an annoyance screen as every 
time you have to encounter with an alert 
box. 

Situation could have been more 
dangerous if malicious user could 
somehow reach through your database, 
issue some malicious command to 
execute a query and steal the potentially 
confidential information. 

Now, there is also a way which permits 
the developer to execute script without 
HTML encoding. So, there is a way to 
do that by using @Html.Raw. 



<td> 


</td 


@*<6>Html.DisplayFor(modelItem => item.ReviewerComments)*@ 
@Html . Raw( item . ReviewerComments ) 


Now, with the above change in place, 
when I refresh the page, then it will 
produce the below output. 


«- x tot.'vx! 

Tn»p«e*«ioctfio 


Movie Reviews 


More on Razor Syntax 

Now, let me show one more thing, 
besides following the conventional style 
of outputting the result what Visual 


studio has created, we can produce the 
output implicitly as well. In the below 
example, it is going to produce me the 
same reviewer comments, but achieved 
with minimal coding. Here, Visual 
Studio is smart enough to identify the 
item and pass the same to the browser. 

@item. ReviewerComments 


Movie Reviews 



Now, let's suppose that you want to mix 
and match the code expression with 


string literals. Let's suppose you need to 
show the rating out of 5. Then, simply 
what you can do is modify the 
expression like this 

@item. ReviewerRating / 5 

Now, when I save and refresh the same, 
it will produce me the below result. 


Movie Reviews 



Now, in many cases, this might be 
possible that you are not dealing rating 


kind of scenario; you need to actually 
perform the mathematical operation and 
get the output. In that case, in order to 
achieve the same, we need to mask the 
same inside the parentheses as shown 
below also known explicit style. 

@(item.ReviewerRating / 5) 

Now, when I save and refresh the same, 
it will produce me the result of the 
division. 


Movie Reviews 



As you can see in the above screen shot 
it returned the integer result because we 
defined rating as Int in our model class. 

Many a time, wherein you need to 
provide your contact address as in 
tweeter handle so that followers can 
follow you. Default way of mentioning 
the same is beginning with @ symbol 
like “ @rahulsahayl9”; my tweeter 
handle. Now, if I write like these in 
razor, this will return me an error as 
shown below. 


@rahulsahayl9 


C localnost 


Server Error in */' Application. 
Compilation Error 

OnpiltrlmirNHMic C»IW 


line *2: 
Lin* 43: 
l In* 44: 
Lin* 45: 
l In* 46: 


$'6Mt*l.Dlipl*yFo''{*od*llt** •> lt«a.R*vi*N*rltating)*f 
#r*n u W«ft«yl9 
</td> 

<td> 


Sounr **»<•- ue.*a*,*»-v*w« >i*c,«0..e.4e«.C4<wn Line: *4 


Verwon Informel.nn: vewl '4^ •■i-.-rr sue 4 0 XJI» 4j»«4T tfnw 4 C N‘5'4 14444 


Now, for this kind of scenario, we need 
to escaping character again by using the 
@ symbol twice in this case. 

@@rahulsahayl9 

Now, when I save and refresh the page, 
it will produce me the desired output. 


Movie Reviews 



Like these there could be numerous of 
code expressions example. Now, let's 
look another kind of scenarios where in 
code blocks are useful. Now, let me 
show you a default and very simple 
example of code block. 

ViewBag. Title = "Movie Reviews"; 

i 

A code block always begin with the @ 


symbol and then the opening curly brace 
followed by the code expressions and 
then the closing curly brace just to 
delimit the code block. Like, these we 
could have as many code blocks as we 
want to produce the desired output. 
However, another mature example of 
code block could be “ foreach ” 
statement wherein razor is producing the 
table with data inside. 



jlforeach (var item in Model) { 

<tr> 

<td> 

@Html .DisplayFor(modelItem => item.MovieName) 

</td> 

<td> 

@Html .DisplayFon(modelItem => item.ReviewerName) 

</td> 

<td> 

.DisplayFor(modelItem => item. ReviewerComments)*@ 
@item . ReviewenComments 
</td> 

<td> 

@*@Html .DisplayFor(modelItem => item. ReviewerRating)*@ 
@@rahulsahayl9 
</td> 

<td> 

@Html . ActionLink("Edit", "Edit", new { id=item.Id }) | 

@Html . ActionLink("Details", "Details", new { id=item.Id }) | 
@Html . ActionLink("Delete", "Delete", new { id=item.Id }) 
</td> 

</tr> 

} 

Now, as you can see in the above code 
block, razor is processing the C# code in 
combination with the string literals and 
hence producing the output. Hence, it's a 
fairly good example of mixing and 
matching the C# code with the string 


literals. Now, here you can modify the 
template entirely and produce the same 
result inside the div. let me just delete 
the HTML table and the code block and 
rewrite everything my custom way 

@tnodel IEnu-enable<MovieReview. Models. MovieReviews> 

@{ 

ViewBag. Title = "Movie Reviews"; 

B 

<h2>Movie Reviews</h2> 


Hello Reviewer, We are having @Model .Count ( ) Reviews. 


<p> 

@Htrrl. ActionLink( "Create New", "Create") 

</p> 

jgforeach (var item in Model) 

{ 

<div> 

< h4 >@item . MovieName< /h4> 

< span >@item. ReviewerName</ span > 
<span>@item. ReviewerComments</span> 
<span>|Slitem . ReviewerRating</span> 
</div> 

> 

Now, here in the above snippet, I have 
replaced the HTML table with small 
code block outputting the same but in a 
different context. So, now, when I save 
the same and refresh, it will produce the 
desired result. 


Movie Reviews 


DW Another Day 


Now, sometimes what happen while 
evaluating the expression from C# to 
string literal back and forth, razor gets 
confused with the intension of user like 
shown below 


<p> 

@Htrrl. ActionLink( "Create New", "Create") 

</p> 

jgforeach (var item in Model) 

{ 

<div> 

< h4 >@item . MovieName< /h4> 

< span >@item. ReviewerName</ span > 
<span>@item. ReviewerComments</ span> 
<span>|Slitem . ReviewerRating</span> 
</div> 

> 

Now, here my intention is to produce the 
word “ Review ” with each div as a 
separator, but when I save the same and 
refresh, this will again produce me the 
below parsing error. 


«* c locilhoit 

Server Error in '/' Application. 
Compilation Error 

C««p<« Iffw C4I!» 


Lin* 109: Clin* d*<*ult 

Lin* 110: »iln* hldd*n 

l In* 112: 

Lin* ll):Mrlt*llt*r«l(*<dlv>\rVn <M>*); 


Now, in order to fix the same, I need to 
again use of some sort of escaping 
character to tell the razor to interpret the 
same as string literal rather than C# 
code. So, to fix the same I need to use 
symbol before the string literal as 


|fi): Review 


Now, when I save it and refresh the 


same, it will produce me the desired 
result. 


Movie Reviews 


OH 


Although, presentation is not pleasing at 
the moment, but we'll fix the presentation 
in the coming chapters when we'll be 
discussing about bootstrapping the UI. 
But, for now just focus on Razor Views 
and its characteristics. 


Layout Views 


Now, let's focus on Layout views, 
Layouts are nothing but master pages. If 
you have been an ASP.Net Developer, 
then you must be familiar with Master 
Pages. However, Master Pages are the 
ones which decide the overall look and 
feel of the site. In the similar context, we 
have Layout views in ASP.Net MVC. 
Layout views also decides the overall 
look and feel, navigational structure of 
the site, Headers, Footers and many 
other things which could be placed 
globally are placed in Layout page. 

Now, in the layout page there are two 
important sections. These are 


RenderBody 
Renders ection 


So, basically above listed sections 
allow the content views like the Index 
view to get injected at the specific 
section of the page. You can find the 
layout view in shared repository as 
shown below. 


a Views 

> Account 

> Home 

a Movie 

[@] Index.cshtml 
a (b MovieReviews 
[@] Index.cshtml 
a Shared 

[@] _Layout.cshtml 


Now, when you open this page, you will 
see the complete sections rendering 
different pieces at different locations of 
the page. 


< IDOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="utf-8" /> 

<t it le>@ViewBag. Title - My ASP.NET MVC Application</title> 

<link href=" /favicon. ico" rel="shortcut icon" type="image/x-icon" /> 
<meta name="viewport" content="width=device-width" /> 

(BStyles . Render( "~/Content/css" ) 

^Scripts . Render ( "~/bundles/modernizr" ) 


</head> 

<body> 

<header> 

<div class="content-wrapper"> 

<div class="float-left"> 

<p class="site-title">§Html.ActionLink("your logo here", 

"Index", "Home")</p> 

</div> 

<div class="float-right"> 

< sect ion id=" login "> 

gHtml .Partial("_LoginPartial") 

</section> 

<nav> 

<ul id="menu''> 

<li>§Html.ActionLink("Home", "Index", "Home")</li> 
<li>§Html.ActionLink("About", "About", "Home")</li> 
<li>§Html.Actionl_ink( "Contact", "Contact", "Home" )</li> 
</ul> 

</nav> 

</div> 

</div> 

</header> 

<div id="body"> 

@RenderSection("featured", required: false) 

Csection class="content-wrapper main-content clear-fix"> 

@RenderBody ( ) 

</section> 

</div> 

<footer> 

<div class="content-wrapper"> 

<div class="float-left"> 

<p>&copy; ^DateTime. Now. Year - My ASP.NET MVC Application</p> 
</div> 

</div> 

</footer> 

^Scripts . Render( "~/ bundles/ j query" ) 

§RenderSection("scripts", required: false) 

</body> 

</html> 


In a nutshell, if I have to explain the 


Layout view, there is nothing special 
about this razor view, it has literal texts, 
it has C# code expressions, it can have 
code blocks as well. It's the file where 
you will see Doctype, Head Tag, and 
then the definition for the body of the 
element. And please be informed that if 
you make any changes to the layout view 
that will reflect application wide. 

Currently, in this application we are 
having only layout page, but we can have 
multiple layout pages as well. In the 
above code snippet of layout view, you 
will see one “( QRenderBodyO ” element, 
this @RenderBody is responsible for 
injecting content views like Index view. 



Now, you might be thinking that how 
ASP.Net MVC Framework knows that 
how to pickup this layout view, as there 
is no instruction written neither in the 
Layout view nor in any index view. And 
to answer this question, let me show you 
one magical file “ ViewStart.cshtmF 
that sits in the root of the Views folder 
as shown below. 

a Views 

> Account 

> Home 

> Movie 

> MovieReviews 


> O Shared 


[@] _ViewStart.cshtml 

Now, when you open this file, you will 
find the declaration to use the above 



layout file. 

Layout = "~/Views/Shared/_Layout . cshtml" 

I 

So, the formula behind this is, that 
“ View Start. cshtml” executes 1 st than 
any other view gets start rendering. 
Hence, this file sets the layout property. 
So, this is the convention of ASP.Net 
MVC Framework, whatever you put in 
the code block of “ View Start, cshtml” 
will execute 1 st . 

Now, if I have to create multiple layout 
views across our application, I can 
follow the below steps. 


1 st Copy the _ViewStart.cshtml and 
then place in the sub directory, where in 
you want have a different layout. In our 
case, I have chosen MovieReviews. 

a O MovieReviews 

[@] _ViewStart.cshtml 
[@] Index.cshtml 
> Shared 

[@] _ViewStart.cshtml 

Now, open this ViewStart.cshtml file 
and set the Layout property by giving the 
layout filename a suitable name like 
shown below. 


} 


Layout = "~/Views/Shared/_Layout_Movie.cshtml"; 


Now, when I save everything and run the 
app, it will produce me the below output 
when I render the home page. 




And , when I go to the MovieReviews 
link, it will present me the below error 


«- c lOCtlhOM 


Server Error in '/' Application. 


The layout page “~/Views/Shared/_Layout_Movie.cshtmr could not be found at the following path: 
~ ~ /Views/ Shared/ _ Layout __ Movie, cshtml", 



U«ii! « 
IW i: > 




And the reason for this is pretty obvious, 
because here MVC Framework is 
looking for the new layout, page, which I 
have not created and hence it resulted 
me the error. Now, in order to fix this, 
let me just copy and paste the same 
layout page but save this with above 
mentioned name. 


A 


Shared 

[@] _Layout.cshtml 
[@] _Layout_Movie.cshtml 
[@] _LoginPartial.cshtml 
[@] Error.cshtml 


Now, when I run the app, it will present 
me the same User Interface, but now 
with a different Layout page. 


Movie Reviews 


So, with this way we can go ahead and 
make the multiple layout pages in our 


application. Apart from this, I can also 
change the layout view per view basis, 
means I can tell any custom view; which 
layout view to render. Let me show you 
one, 



@model |l Enumerable<MovieReview. Models .MovieReviews> 


ViewBag. Title = "Movie Reviews"; 

Layout = "~/Views/Shared/_Layout_another.cshtml" 

K 


<h2>Movie Reviews</h2> 

Hello Reviewer, We are having @Model. Count () Reviews 

<P> 

(SIHtml .ActionLink( "Create New", "Create") 

</p> 

@foreach (var item in Model) 

{ 

|S>: Review 

<div> 

<h4 >@item.MovieName</h4> 

<span>@item . ReviewerName</span> 

<span>@item. ReviewerComments</span> 
<span>@item . ReviewerRating</span> 

</div> 


> 


Now, here in the above example I have 


literally override the Layout property. 
Now, this will look for layout view with 
the name Layoutanother, which doesn't 
exist in the system, hence this will return 
an error as shown below. 


«• C 


Server Error in '/' Application. 

The layout page '-.'Views/ Shared/. Layout another cshtml’ cov'd not be found sc the foUowmg pstn. 
‘ "/Views/ Shared/ _ Layovt_ another, cshtml’. 



I can also turn off the layout view as 
shown below. 


@model |l Enumerable<MovieRe view. Models .MovieReviews> 


ViewBag. Title = "Movie Reviews"; 

Layout = null; 

K 

<h2>Movie Reviews</h2> 

Hello Reviewer, We are having @Model. Count () Reviews. 

<P> 

@Html .ActionLink( "Create New", "Create") 

</p> 

|0foreach (var item in Model) 

{ 

@1: Review 
<div> 

< h4 >@item . MovieName< /h4> 

<span>@item . ReviewerName</span> 

<span>@item . ReviewerComments</span> 
<span>@item . ReviewerRating< /span> 

</div> 

} 


Now, when I save and refresh the page, 


it will produce me the below output. 


<- C D localhost:1033/MovieReviews 

Movie Reviews 

Hello Reviewer, We are having 3 Reviews. 

Create New 
Review 

Avatar 

Rahul Sahay Excellent 5 
Review 

Die Another Day 

Rahul Sahay <script>alert('You are hacked! ');</script> 4 
Review 

Titanic 

Rahul Sahay Awesome 5 


No styling, no theme, no navigational 
links, just plain html. Now, inside the 


layout view, there is one more method 
called as “@Render Section ” . One point 
to understand here, that this method is 
optional; you can have multiple sections 
on a page. So, when you see the Layout 
page, you notice two “ Render Sections ” , 
rendering two different sections at two 
different places. 


1 st one is rendering @RenderSection("featured", required: false) and 2 nd one at the bottom 
of the page which is rendering scripts as §RenderSection( "scripts", required: false) . 


Now, if you see the code closely, you 
code easily observer that currently 
RenderSection is marked as optional, 
but, what will happen if you switch this 
to true. Let's try and check the same. 


(3)RenderSection( "featured " , required: true) 


Now, when I save the page and try, then 
it will produce me the below error. 


«- c : tod»!04t ' 

Server Error in '/' Application. 
Section not defined: "featured". 



Lin* »: </h *«d*r> 

Lin* 11: «)lw ld*"body" > 

Lin* U: • io«( , fftalrM: lm*) 

Lin* Jl: ocction cl*s>**cont*nl-m-«pp*r a*ln-eont*nt clw-<l**> 

l In* 14: #«*nd*^e«Jy() 


Now, this error is quite educational, it's 
clearly saying that you have marked 
Section field as mandatory in the layout 
page, but the same has not created on the 
index page. So, in order to fix the same I 
can go ahead and create one section 
there on the reviews page. 


|^H^MlEnumerable<MovieReview. Models .MovieReviews> 
ViewBag. Title = "Movie Reviews"; 

c 

<h2>Movie Reviews</h2> 

(Slsection featured{ 

Hello Reviewer, We are having @Model . Count ( ) Reviews. 

I 

<P> 

@Htrrl.ActionLink( "Create New", "Create") 

</p> 

@foreach (var item in Model) 

{ 

Review 

<div> 

<h4>@item .MovieName</h4> 

< span >@item . ReviewerName</span> 

< span >@item . ReviewerComments</span> 

<span>@item . ReviewerRating</span> 

</div> 

} 


Now, with the above change in place, 
when I refresh the page, it will produce 


me the desired output. 


Movi* Review* 


Obviously, here UI got distorted, but for 
now UI is not my concern. Now, since I 
have marked the section mandatory on 
the layout page, hence this error will 
appear on every page wherever the 
section has not been implemented, hence 
it is advisable to turn off this from the 
layout page. Now, the cool thing about 
the sections are that these can be placed 


anywhere on the page and you can have 
any number of sections on the page. 
Now, let me go and create one link for 
our MovieReviews page. I just need to 
make one small change. 


<ul id="menu"> 

<li>§Html.ActionLink("Home", "Index", "Home")</li> 
<li>(BHtml .ActionLink( "About", "About", "Home")</li> 
<li>§Html.ActionLink("Contact“, "Contact", "Home")</li> 
<li>®Html .ActionLink( "Reviews", "Index", 

"MovieReviews" )</li> 

</ul> 

</nav> 


Now, when I save the same and refresh 
the page, it will create a new link for my 
page as shown below. 


HTML Helpers: - 


As you might have noticed in the above 
explanation, where in I have used Action 
Link to create one navigation property is 
one of the many HTML Helpers. The 
purpose of the HTML Helpers is pretty 
simple; it makes it easy to create small 
chunks of HTML. In order to perform the 


same, we have variety of helpers. Some 
of them I have listed below: 

Create inputs 
Create links 
Create forms 

Also, there are helpers which are meant 
for validation messages, labels etc. 
some of these helpers are intelligent 
enough to resolve the dependency quite 
brilliantly like shown below 

( @HTML.EditorFor(mo de l=>mo de 1.M 

So, if you see the above Editor For 
property it's job is quite simple, it will 
walk up to the property and inspect it's 
type; determined that “ MovieName ” 


property is a string and hence will emit 
“ Textbox ” for editing the same. 

Consider, the same case, if it would 
have been with some Boolean type, and 
then it would have emitted the 
“Checkbox”. There are tons of other 
properties which EditorFor performs, 
but it would be quite significant to 
explore the same when we use it later in 
coming chapters while developing the 
application. 

Now, in a nutshell EditorFor, LabelFor, 
Valida t io 11S umnia ry . all these are 
available from the HTML properties 
which View inherits. Now, let's go 
ahead and use the same in our 
application, so that you can understand 



the concepts quite wisely. 

So, what I am going to do here, I am 
going to enable the user to edit the 
reviews. So, this edit action will be 
using significant numbers of different 
HTML Helpers. 

<span>@Html. ActionLink("Edit", "Edit",new{Id=item.Id})</span> 


As you can see in the above snippet, I 
have created one more span tag for 
editing the review. So, with the action 
link property obviously 1 st property is 
going to be the name of the link, as 
“ Edit ”, 2 nd property is going to be the 
action method in the Controller which 
is again going to be “ Edit ”, 3 rd 


parameter is the one where I need to 
pass along few values with this action 
link, so that MVC framework can 
identify which review am interested in 
to modify, hence I have passed Id as a 
value. 

Now, as you might have noticed that I 
have encapsulated the Id property in an 
anonymous object. And there can be any 
no of different values which we want to 
pass, we can send the same way. So, 
ultimately these additional information 
will get passed to the routing engine, and 
then routing engine will decide that ok 
these additional values need to get 
passed in the URL. So, the pattern of 
URL would be like 



“ moviereviews/edit/V\ Now, let's save 
everything and refresh the page. 


Movie Reviews 


OM AneUw> Day 


Now, when you hover on any edit link, 
this will display the above highlighted 
link at the bottom of the page. Now, let 
me go ahead and click the same. But, 
when I click it, it will present me the 
below error. 


S«rver Error in Application. 


The new Edit or its master was not found or no view engine supports the searched locations. The following locations were searched 

~/Views/movierev<ews/Edit. aspx 

-/Views/movlerenews/Edit.ascx 

-/Views/Shared/ Edit, aspx 

-/ Views/ Shared/ edit, ascx 

-/ Views/ monerenews/ Edit. cshtmt 

-/Views/moviereviews/Edit. rDhtml 

-/Views/ Shared/ Edit. cshtmi 

-/vmwt/Shered/eo<t. rDhtml 



And now the reason for the above error 
is pretty obvious, we already have the 
Edit action in our controller, but we 
don't have the view associated with this. 
So, in order to fix it, let me go ahead and 

create the view 1 st . obviously the 
technique to create the view is going to 
be same. But, before this we need to add 
few more lines of code in the edit action. 
So, the 1 st thing where I'll focus is action 
method for the “Get” action. Now, the Id 
in the URL will automatically get 


extracted from the parameter which is 
listed in the below method. Hence, what 
I need to do is to go ahead and find the 
id which is invoked. 

// 

// GET: /MovieReviews/Edit/5 

public ActionResult Edit(int id) 

{ 

var movieReview = _movieReviews .Single(m => m.Id == id); 
return View(movieReview) ; 

> 

So, above code will return me a single 
review associated with the id. Now, the 
above snippet is just a little LINQ query 
to fetch the review against the id which 
is getting received. Now, this fetched 
result is going to be the model for my 
view. Now, I can go ahead and add Edit 
view as shown below. 


View name: 

Edit 

View engine 
Razor (CSHTMl) 

J Create a strongly-typed view 
Model class; 

MovieReviews (MovieReview.ModeH) ▼ 

Scaffold template 

Edit J Reference senpt libranes 

Create as a partial view 
•/ Use a layout or master page 

Q 

(leave empty if it is set in a Razor _viewstart file) 

MamContent 

Add Cancel 


Now, this will create me the desired 
view as shown below. 



@model MovieReview. Models .MovieReviews 


@{ 

ViewBag. Title = "Edit"; 

1 

<h2>Edit</h2> 

fusing (Html.BeginFormO) { 
@Html.AntiForgeryToken( ) 

@Html . ValidationSummary(true) 

<f ieldset> 

< legend >MovieReviews</legend> 
@Html.HiddenFor (model => model. Id) 


<div class="editor-label"> 


©Html . LabelFor (model => model .MovieName) 

</div> 

<div class="editon-field"> 

©Html . EditorFor(model => model .MovieName) 
@Html.ValidationMessageFor(model => model .MovieName) 

</div> 

<div class="editon-label"> 

©Html . LabelFor (model => model . ReviewerName) 

</div> 

<div class="editor-field"> 

©Html . EditorFor(model => model . ReviewerName) 

©Html .ValidationMessageFor( model => model . ReviewerName) 
</div> 

<div class="editor-label"> 

©Html . LabelFor(model => model . ReviewerComments) 

</div> 

<div class="editor-field"> 

©Html . EditorFor(model => model. ReviewerComments) 
@Html.ValidationMessageFor(model => model . ReviewerComments) 
</div> 

<div class="editor-label"> 

@Html. LabelFor (model => model . ReviewerRating) 

</div> 

<div class="editor-field“> 

©Html . EditorFor(model => model . ReviewerRating) 

©Html .ValidationMessageFor( model => model . ReviewerRating) 
</div> 

<P> 

<input type="submit" value="Save" /> 

</p> 

</fieldset> 

> 


<div> 

©Html.ActionLink("Back to List", "Index") 
</div> 


©section Scripts { 

©Scripts. Render ( "~/bundles/jqueryval" ) 

1 


Now, when I build and refresh the page, 
then in that case it will produce me the 
below output. 


Edit 

Movi*Na*r* 

AvafcM 

RcvtawerName 

RaruSahay 

RevicvyerCommento 

ExtiM 

RavvYryi Rating 

5 

Sava 


So, if you remember above I have 
explained about “ EditorFor Now, 
based on the incoming value type like 
STRING type for “Movie Name” 
property or “Reviewer Rating” which is 
of type INT, MVC Framework emitted 


me the textbox to edit the same. So, this 
is what I emphasized about intelligent 
helpers. Now, let me go ahead and 
inspect the created form inside the view 
side by side with the view source. 




So, here “ HTML.BeginForm ” writes 
an opening Form Tag for me. It also 
ensures that method is going to be 
“ Post ”, when user clicks on the “Save” 


button. One point to note here that 
“ BeginForm ” is very useful, because it 
enable me to change the URL, change the 
method etc. Also, there is one more 
HTML helper listed in the view that is 
44 @HTML.HideenFor ” which is going 
to emit the hidden field. Why MVC 
Framework has emitted a hidden value 
for this? 

MVC Framework intelligently figures 
out that this is Id field mentioned in the 
model class and hence it needs to be 
prevented from getting edited, that is 
why marked as hidden. Then, we have 
“ LabelFor ” HTML Helper which is 
emitting the labels on the screen. There 
is also “ValidationMessageFor” helper 



which is going to display proper error 
message if anything wrongly entered 
while making the change. 

Let's take an example, I have omitted the 
rating value and it intelligently produced 
me the below output. 


Edit 


RtfUSatay 


EneM 

RcvirwtrfUbng 

l Th« tovWMfKMtog <M4 a n qu md . 






Now, this is client side validation which 
is getting generated from the client side 


scripts bundled under “jqueryval” as 
shown below in the script. 


^section Scripts { 

^Scripts . Render ( "~/bundles/ jqueryval" ) 

I 

Now, let's go ahead and complete other 
pending actions like when you post the 
edited form then it needs to take the 
effect. So, I am going to modify the 
default code presented to me by Visual 
Studio. Here what I am going to do; take 
the value that user typed in based on the 
“ZD” and then move the values in using 
the method ‘ ‘ TryUpdateM ddeV ’ . So, 
what this method will do is go through 
the process of “Model Binding ”. Now, 
one point to note that model binding can 


happen any time if you have any 
parameter also in the action method. 
Also, this is what ASP.Net MVC 
framework does, it goes there and looks 
for the request and tries to find the thing 
and move the object for you. So, in the 
below method, I have parameter with the 
name 7/r in the model action, ASP.Net 
MVC will find that ID, and move the 
same for me. 



// 

// POST: /MovieReviews/Edit/5 
[HttpPost] 

public ActionResult Edit(int id, FormCollection collection) 

{ 

try 

{ 

var movieReview = _movieReviews .Single (m => m.Id == id); 
if ( T ryllpdateModel ( movieReview) ) 

{ 

//To Do:- database code 

return RedirectToAction( "Index" ) ; 

> 

return View(movieReview); 

} 

catch 

{ 

return View(); 

} 

> 

So, when I say 

‘ ‘ TryUpdateM odel ( mo v i e Re v i e w/ ’, the 
model binder will go and look at the 
movieReview, look for rating property 
whether it has one. Now, there should be 
a posted form input named rating, so the 
MVC runtime will find that and just 


move it in for me. So, during this entire 
course of action if anything fails, if any 
validation error occurs, 

“ TryUpdateModeF will return false and 
then we don't save the review. 

We'll do deep detailing about validation 
in the coming chapter. So, if that fails 
then I just simply return the view with 
the same old movieReview to the user to 
fix the same and submit again. But, if 
everything goes fine, at that instant we 
want to save the review to the database. 
But, at this instant we are not working 
with database, hence just return it to 
index page. Now, when I build and run 
the app, then this will produce me the 
below result. 



«- c 


Movie Reviews 


Now, when I click the edit link, it will 
produce me the below result. 


Edit 



RevmwfNjm* 
Ratal Softly 


ReviewerConvnents 

ticoeort 

RtviowerRataQ 



So, in the above screen shot, I have 
changed the rating to 4, and then when I 
save the form, it will redirect me to the 
index page of the Movie Review with 
the modified value. 


c 




Movie Reviews 


«nui 

luv svuy be***. * tiu 


Ok Anoilw* Oiy 

►*<» 4 Eau 


it: 


Please note that these changed values are 
not going to commit in the database, 
these are in memory static values, so 
when you closed the browser, these 
changed values will get lost. Apart from 


these HTML Helpers, there are many 
other HTML Helpers which you could 
see in intellisense window and its usage. 


«dl* 

fatal. (ditorror(aodel •> aodel.RjrvlmertUting) 
. ijv Art , on 

t/Mv> ^ Ac|.onl*M 

<(l © Wdjrfletw 

< input © Asnbutalnteda 

«/»• hyrfom 

</f Icldaet » (.v BafrnHoutadom. 

'i', ChaakSoa 

lv> ^ Chatttoafoc. » 

fttal.Actleni.l'-V Onpl'y 


RoutaValuaOKt*«ar, routaValuail <• 5 cnwtoadto) 
liMin ttu i[ir!ificd thud action math 
ictums the retut! at an WTMl ttnn 9 . 


Now, one important point to note here 
that every HTML property inherits from 
its base class; and this HTML property 
of type 

“ System . Web.Mvc.HtmlHelper<T >” , 
where T is a generic type parameter 
representing the type of the model for the 
view (dynamic by default). So, as we 
see in the above screenshot, all these 
extension methods are at your help for 


building MVC Application. You should 
only know its implementation and when 
to use the same. However, if you think 
these generic extension methods are not 
going to serve your purpose, you can 
obviously build your own extension 
methods. 


HTML.ValidationSummary:- 

The Validation Summary property 
displays an un-ordered list of all 
validation errors in the “ ModelState ” 
dictionary. Now, the Boolean parameter 
which we are using (with a default value 
true) is telling the helper to exclude 
property- level errors; which means you 


are telling the summary to display only 
the errors in “ ModelState ” associated 
with the model itself, and exclude any 
errors associated with a specific model 
property. For instance you have the 
following code somewhere in the 
controller action rendering the edit 
view: 


ModelState. AddModelError("", "Without Property");” 

"ModelState. AddModelEnor("MovieName". "With Name Property!");” 


So, the first error is a model-level error, 
because we didn't provide a key to 
associate the error with a specific 
property. The second error we 
associated with the “ MovieName ” 
property, Hence in your view it will not 
display in the validation summary area 



(unless you remove the parameter from 
the helper method, or change the value to 
false). In this scenario, the helper 
renders the following HTML: 

<div class="validation-sunimary-errors"> 

<ul> 

<li> Without Property - li> 

</ul> 

</div> 


Some more HTML Helpers:- 

So, in this case we 1 st look at 
“HTML. Text Box” and 
“HTML. Text Area' 1 . So, the textbox 
helper renders an input tag with attribute 
“text”. Basically, we use this to accept 


any kind of inputs from users; For 
instance 


“( aHtml . TextBox("MovieName ", ModeLMovieName)'' 


This produces below output, when you 
see the source of the page rendered. 

“<mput id=" ’MovieName" name-'MovieName" type="text" value=" Avatar" />" 

Also, related to the above helper we 
have “ TextArea We use this helper 
when we want user to enter multi line 
description, like movie Review or in 
more general Address. 

The following code: 

"(aHtml. TextArea ( "text”, "Hello <br/>MVC") 



Produces: 


“ <textarea cols="20" id="text" name="text" ron s="2">Hello &lt;br /&gt; MVC </textarea > ” 


HTML.DropDownList and 
HTML.ListBox 

Now, both dropdownlist and ListBox 
helpers return a “<select/>” element. 
Now, here “DropDownList” returns the 
single item whereas “ListBox” returns 
for multiple items. 

Here, it requires a bit of work in the 
controller. A list needs a collection of 
“SelectListltem” instance representing 
all the possible entries for the list. Also, 
a “SelectListltem” object will have a 
“Text”, “Value”, and Selected 



properties. We can also build the 
collection of “SelectListltem” objects 
our self, or rely on the “SelectList or 
MultiSelectList” helper classes. These 
classes can look at an ‘TEnumerable” of 
any type and transform the sequence into 
a sequence of “SelectListltem” objects. 
For instance, we can have one sample as 
shown below 


public ActionResult Edit (int id) 

{ 

var movie = moviedb.Movies.$ingle(m => mMovield == Id); 

ViewBag.DirectorN'ame = new SelectList(inoviedb. DirectorNaine.OrderBy(g => g. DireetorName), 
"Movield", "DireetorName", movie. Movield); 
return View(album): 

) 

You can think of the controller action as 
building the primary model (the album 
for editing) and also the Presentation 
model required by the drop-down list 



helper. Here, the parameters to the 
“ SelectList ” constructor specify the 
original collection, the name of the 
property to use as a value (“ Movield ”), 
the name of the property to use as the 
text (Name), and the value of the 
currently selected item (to determine 
which item to mark as selected). 

Now, the same thing can be done other 
way as well, If you want to avoid 
reflection overhead and generate the 
“ SelectListltem ” collection yourself, 
you can use the LINQ Select method to 
project Movie into “ SelectListltem ” 
objects: 



public ActionResult Edit(mt id) 

{ 

var movie = moviedb.Movies.Siiigle(a => a.Movield = Id); 
ViewBag.DirectorName = 
mo viedb .Movies 
OrderBy(g => g. DirectorName) 

. AsEnumerableO 
.Select(m => new SelectListltem 
{ 

Text = m. DirectorName. 

Value = g. DirectorName. 

Selected = movie.Movield = m.Movield 

}); 

return View(movie); 

} 

Html. ValidationMe s s age 

Whenever there is an error for a 
particular field in the “ ModelState ” 
dictionary, you can use the 



‘ ‘ Validation Message' ’ helper to display 
the error message. For instance, in the 
following controller action, we 
purposely add an error to model state for 
the “ MovieName ” property: 


[HttpPost] 

public ActiouResult Edit(int id, FonnCollection collection) 

{ var movie = mo viedb . Movies . F md(id) ; 

ModelState.AddModelError("Movie>*’ame", "Displaying Error message for Movie Title"); 
return View(movie): 

> 


Now, in the view, you can display the 
error message (if any) with the below 
code: 

@Html.ValidationMessage("MovieName 
which will produce: 


<span class-' field- validation-error" data-valmsg-for="Title" data-valmsg-replace="true"> 

Displaying Eivor message for Movie Title 

</span> 



This message appears only if there is 
any error in the model state for the key 
“ MovieName 

HTML.Password 

Now, the “ HtmLPasswortT helper 
renders a password field which is in 
nature much like the “ Text Box helper ” 
except that it does not retain the posted 
value rather it uses a password mask. 
The following code: 

@Html.Password("YoiuPassword") 

Produces: 


<input id="YourPassword" name- ' YourPassword" type="password" value=' 



The strongly typed syntax for 
Html. Password, as you'd expect, is 
“Html.PasswordFor ” . Here's how you 
will use it to display the 
“YourPas sword” property: 

(aHtml.Pa sswordFor( m => nt.YourPassword ') 


HTML.RadioButton 

Radio buttons are generally grouped 
together to provide a range of possible 
options for a single value. For instance, 
if you want the user to select a 
programming language from a specific 
list of languages, then you can use 
multiple radio buttons to present the 
options. 



The “ HtmLRadioButton ” helper 
renders a simple radio button. Below we 
have few samples explaining the same. 

@Html.RadioButton("language", "C #", true) 
@Html.RadioButton("language ", "VB") 
@Htnil.RadioButton("language ", "C++") 

This will produce the below result: 


<input id=" language" naine=" language" type="radio" value-' C#" ehecked="checked" /> 
<input id=" language" name=" language" type="radio" value="VB" /> 

<input id=" language" name-' language" type-'radio" value="C++" /> 


HtmLRadioButton has a strongly typed 
substitution as well, 

‘ ‘ Htm LRadioButtonFor. Now, strongly 
typed version takes an expression that 
identifies the object which contains the 
property to render, followed by a value 



to submit when the user selects the radio 
button. 

@Html.RadioButtonFor(m => m.Movield, ”1") Avatar 
@Html.RadioButtonFor(m => m.Movield, "2") Titanic 
@Html.RadioButtonFor(m => m.Movield, "3") Godzilla 


HTML.CheckBox 

Now, comes is checkbox helper which is 
unique in many aspects because it 
renders two input elements. For instance 

@Html.CheckBox("IsReady") 

This code produces the following 
HTML: 


<input id="IsReady" name="IsReady" type="checkbox" value-'tme" /> 
<input name="RReady" type—'hidden" value-'false" /> 



Now, here you might be thinking that 
why it renders two inputs one with 
hidden behavior. Now, one important 
point to note here is that HTML 
specifications indicate that a browser 
will submit a value for checkbox only 
when the checkbox is selected. Now, 
here the second input guarantees a value 
will appear for “IsReady” even when 
the user does not check the checkbox 
input. 


Partial Views 

Partial Views are just another type of 
view which enhances reusability. So, 
think of partial views like user controls 


where in you have some common pieces 
of code which needs to be reused time 
and again at various places. So, in my 
application example let me cut a piece 
of code which I am going to render at 
different places and create one partial 
view. 



Add View 


View name 



_mov»eRevievrf 
View jng«nr 


Razor (CSHTML) 

J Create * strongly -typed view 
Model class 

MovieReviews (Mov»eRrview.ModeHj 
Scaffold template 

Empty 7] 

J Create as a partial view 


J Reference script libraries 


(leave empty if * is set in a Razor _v»ewstart fik) 


Add 


Above is the screen shot, for creating 
partial view, I have named the same 
starting with Well underscore (_) is 
just a convention for naming any partial 



view, it just depends on you, and how 
you name partial views. I just do the 
same in order to identify partial views 
by just looking it. You might have 
noticed while creating the same, I have 
used the same model which I have used 
earlier but this time I have selected the 
empty template from the scaffolding 
option, because I am already having the 
markup which my partial view is going 
to have. 

Now, upon clicking add button partial 
view gets created. Now, in here I have 
copied the markup from the index page 
of the movie review and just replaced 
the term item with Model, because here 
in partial view, we'll be taking care of 



one movie at a time. 


loimodel MovieReview. Models .MovieReviews 


<div> 

<h4>@Model .MovieName</h4> 

<span>@Model . ReviewerName</span> 

< span >@Model . ReviewerComments< /span> 

<span>@Model . ReviewerRating</span> 

<span>@Html . ActionLink( "Edit", "Edit", new{Id=Model . Id})</span> 
</div> 


Now, in order to render the partial view 
from the Index page, I just need to do 
one small thing as shown below. 


gmodel n umera ble<MovieReview. Models. MovieReviews> 


ViewBag. Title = "Movie Reviews”; 

I 

<h2>Movie Reviews</h2> 

Hello Reviewer, We are having gMcdel. Count ( ) Reviews. 


<P> 

6Html.ActionLink(”Create New", "Create”) 

</P> 

gfcreach (var item in Model) 

gHtml . Partial( "jnovieReviews" , item) 

} 

So, in here I have just used HTML 
helper to render the partial view. I have 
used its name with the individual model 
to pass in the properties required. With 
this change in place, when I save 
everything and refresh the page, it will 


return me the same output, but this time 
with the partial view. 


Movie Reviews 



Ow Another Day 
THank 


Let me explain one more scenario where 
in you want to use partial view. You may 
land up in a situation where in you want 
to render something and that is not part 
of the model, it generally happens with 
the layout views. 

Since layout is application wide; hence 


so it's difficult to restrict the layout view 
with any model. So, let me consider a 
scenario where in you always want to 
show best movie reviews at the bottom 
of every page. Now, in order to do that, 
you need to implement the same on the 
layout page. 

So, in order to fulfil the requirement, 
we'll be using one more HTML Helper 
called as Action” . Now, this 

“@Html.Action” will setup a sub 
request inside the primary MVC 
Request. So, it's basically a sub request 
that goes out and call another controller 
action which builds its own model 
dependent on what main controller is 
doing and render its own partial view. 



So, in the layout page I'll add this piece 
of code. 


<div> 


@Html . Action("bestReviews" , "MovieReviews") 
</div> 


So, up here I am looking for the action 
method “best Reviews” in the 
“ MovieReviews ” controller. Now, let 
me go ahead and create the desired 
Action method. 

public ActionResult bestReviews( ) 

{ 

var movieReview = from m in _movieReviews 

orderby m. ReviewerRating descending 
select m; 

return PartialView( "_movieReviews", movieReview. First () ); 

> 


Now, up here what I am doing is, I have 
created one action method, which is 


returning partial view which I have 
already created with the required model. 
In order to construct the model, I have 
just used a little LINQ query to fetch the 
best rated sorted movie. Now, when I 
build the same refresh the page, it will 
present me the below output. 


Movie Reviews 


Viewbag and Viewdata:- 


Last but not the least; I thought to cover 
this topic in this Mews chapter only. You 
might have noticed that while creating 
any view and passing the data from the 
controller, there is one property with the 
name “ ViewBag ” which is getting set 



public ActionResult Index () 
{ 


var Controller = RouteData. Values ["controller"]; 
var Action = RouteData . Values["action" ] ; 
var Id = RouteData. Values["id"]; 


string Output = string . Format( "Controller = {0}, Action= {1}, Id= {2}", 


Controller, Action, Id); 


ViewBag. Message = Output; 


return View(); 


> 


ViewBag. Title = "Home Page"; 


l 


So, what is happening here, that data is 
getting passed in from controller to view 
via “ViewDataDictionary ” , a special 


dictionary to maintain “ ViewData ” . 
However, if you remember, that you can 
set and get property from the standard 
dictionary property like 
ViewData[“CurrentDay”]= 
DateTime.Now.Day 

Now, from the definition point of view, 

“ ViewBag ” is just a dynamic wrapper 
around “ViewData”. So, the above 
example could also be written like 
ViewBag. CurrentDay= 
DateTime.Now.Day 

So, from my point of view I didn't see 
any technical advantage, one is getting 
over other, it depends on one 
perspective, that how they are willing to 


choose one. It's all depending on 
developer's friendliness with one. 


Summary:- 

So, in this section we have seen Views 
and their usage in Detail. We have touch 
base on different kind of scaffolding 
templates, while creating the views. We 
have also seen that how to prevent the 
XSS attack. Then, we have seen how to 
use HTML Helpers in various cases. We 
have covered multiple important HTML 
helpers and it's usage in brief. We have 
also seen Layout page and its usage, like 
we have created multiple layout pages in 
our application. We have also used 


partial views to enhance the reusability. 
In the end we have covered ViewData 
and ViewBag property with a simple 
example. 



Chapter 4: 
Getting Started 
with Data 
Modeling 

WHAT DO you find in 
this CHAPTER? 


Introduction 


=> Using Entity Framework 
=> Entities Creation 
=> Database Migrations 
=> LINQ 
=> Search Query 
=> Summary 

Introduction:- 


Hi Friends, I hope you have enjoyed the 
journey towards learning MVC. In this 
entire course having said to my earlier 


statement, my entire focus is on building 
End To End application, so that at the 
end of the day, you not only grasp the 
theoretical concepts rather understand 
their usage practically as well. So, in 
this section our entire focus will be on 
building Data Model. In this case, we'll 
look one interesting technology for 
building the same known as 
“Entity Framework” also known as EF 
and then combine the EF with plain 
simple C# class definition to build an 
application. 

We'll also use SQL Server to persist the 
data and LINQ to query against the 
database to fetch the records. But, before 
jumping to build data model, let me 



introduce you with the new UI of our 
application. I'll just do touch base on UI 
features and improvements as the scope 
of this book is MVC only. 



Select One Home About Contact Reviews o Login 


Movie Reviews 

Hello Reviewer, We are having 3 Reviews. 
Avatar 

Die Another Day 
Rahul Sahay Nke Movle4Edl( 

Avatar 

Rahul Sahay Excellent S Edit 


So, as you see in the above screen shot, 
the Layout and Theme has been 
changed. I have used Bootstrap 
Templates to boost my UI design. The 
idea behind these templates is, these 
templates are lightweight, easy to use, 




mobile friendly, adaptive to HTML 5 
features, easily adjustable to any devices 
of different resolutions. So, you can 
download any of these free templates 
from ( http://bootswatch. comA and then 
integrate the same in your application. 


Using Entity Framework: - 

In this section, the 1 st step which I am 
going to focus is on setting up Entity 
Framework. Since, EF is part of.NET 
Framework and we already have a 
reference ofEF inMVC Internet 
application. Basically, EF allows me to 
access relational database using strongly 
typed C# LINQ Queries. So, the 


reasoning over here is that when I am 
working with classes to talk to EF, I 
really don't have to worry about legacy 
SQL settings like ( Sql Connections, Sql 
Commands, Sql Parameters etc.). So, 
these were the basic things which we 
used to program with SQL Server using 
“ ADO.NET ’ prior to EF. So, with the 
EF, I can directly work with C# code 
and I can issue query against the 
database using the “LINQ (Language 
Integrated Query)” technology. 
Primarily there are three different styles 
to get started with EF. I have a very 
detailed explanation of EF in my blog 
which you can refer @ 

( http://myview. rahulnivi. net/?cat=l ) . 
But, let me give brief snapshot about 


different approaches. 

Schema First Approach:- So, basically 
in this approach what we do, we open a 
graphical designer in Visual Studio 
where in we are pointing the EF to an 
existing database so that we can import 
the database schema. Now, this will 
import the entire schema and generate 
the classes which we need to query and 
update the database back. 

Model First Approach: - In this 
approach I use the same graphical 
designer inside the visual studio, to 
draw an overall model of my 
application. And then EF will generate 
both my class definitions and my 



database schema. 


Code First Approach: - Last but not the 
least there is one Code First Approach. 
This one is my personal favorite. In this 
case, I just write C# classes and then EF 
use the class definitions to create the 
database for me. And for doing the same, 
EF follows certain conventions like 
Naming Conventions. We can also 
provide explicit mappings wherein I can 
change the mappings if I don't like the 
default one. So, in this book, I'll be using 
Code First Approach. 

As a FYI, let me tell you that EF doesn't 
mandate any kind of database what you 
have in the backend. It works well with 



variety of different technologies like 

Sql Server 

Oracle 

DB2 

Cloud etc... 

Now. In this case we are working with 
SQL Server. As I said, I have just put 
the definitions of different EF style; But, 
in order to see them in action, how to get 
started with them, and use it in your 
application, refer my blog wherein I 
have written complete set of examples 
( http://myview. rahulnivi. net/?cat=l ) 
explaining each style in detail. 


Entities Creation:- 


Now, the time has come to setup the 
environment in which data can persist. 
So far we have been using in memory 
data to test the application. Now, from 
here I also need to move few properties 
from “Movie Review” class to a new 
class say “Movie” class and then build 
the relationship between these two 
classes. 

using System; 

using SystemCollections.Genene; 


using System.Lmq; 
using System. Web; 

namespace MovieReview.Models 

{ 

public class Movie 

{ 

public int Id { get; set; } 
public stiing MovieName { get; set; } 
public stiing DirectorName { get; set; } 
public stung ReleaseYear { get; set; } 

public ICollection<MovieReviews> reviews { get; set; } 

} 

} 

And then, every movie class will be 
using some associated Review. So, I 
have put the same in “/Collection”, a 
collection of Mo vie Reviews. So, this is 
how I am building the relationship 
between the Entities. Now, I can go 


ahead and change the original 
“ MovieReviews ” class a bit. 

using System; 

using System. Collections.Generic; 
using SystemLinq; 
using System. Web; 

namespace MovieReview.Models 

{ 

public class MovieReviews 

{ 

public mt Id { get; set; } 
public stnug ReviewerName { get; set; } 
public stung ReviewerComments { get; set; } 
public int ReviewerRating { get; set; } 
public int Movield { get; set; } 

} 

} 


However, if you have noticed in the 
above class definition, I have just 
removed the “ MovieName ” from the 
class and added one property with the 
name “ Movield So, here “ Movield ” 
field is pointing back to the Movie class 
with which review is associated. Now, 
these two classes are going to be my 
entities which I am going to use to save 
the records in the database and retrieve 
the same from the database. In actual 
scenario means in the enterprise level, I 
always prefer to have a class library 
project, basically an independent project 
for my model classes just to increase the 
reusability and isolation level to a 
greater extent. But, in this case I am 
leaving the same in the Models folder 



which Visual Studio has created for me 
by default. Now, the next step is going to 
add another class which is going to talk 
to EF, to retrieve and save the data for 
me. 

using System; 

using System. Collections . Generic; 
using System.Data.Entity; 
using SystemLmq: 
usmg System. Web: 

namespace MovieReview.Models 

{ 

public class Mo\ieDb:DbContext 

{ 

public DbSet<Movie> Movies { get; set; } 

public DbSet<MovieReviews> MovieReviews { get; set; } 

} 

} 


As, you can see in the above snippet, 


“ MovieDb ” derives from an EF class 
known as “ DbContext And then, in 
that DbContext, I have used couple of 
properties with the name “ DbSet ”, 
which basically represents the entity 
which you want to query and save. 

Now, let me go ahead and use the above 
definition to bring in some data and 
produce the same on the home page. So, 
for doing the same I need to modify the 
code a bit in the Home controller 1 st . So, 
let's do that. 




jie w. Controllers 


I 

B 

I 

b 




Now, in the above screen shot, you can 
see EF in action, it has listed my both 
“ DbSets ”, with which I am going to 
fetch the data and persist the same back 
to database. 


using MovieReview. Models; 
using System; 

using System. Collections Generic : 
using SystemLinq; 
using System. Web: 
using System.Web.Mvc; 

namespace MovieReview. Controllers 

{ 

public class HomeController ; Controller 

{ 

MovieDb _movieDb = new MovieDbO; 
public ActionResult IndexO 
{ 

var model = uiovieDb.Movies.ToListO; 
return View(model); 

} 

public ActionResult AboutO 

{ 

ViewBag.Message = "Your app description page ' 
return ViewO; 

} 

public ActionResult Contact() 

{ 

ViewBag.Message = "Your contact page ”; 
return ViewO; 

} 

protected override void Dispose(bool disposing) 

{ 

if (_movieDb != null) 

{ 

_movieDb.DisposeO; 

} 

base.Dispose(disposing) ; 


} 

} 

} 

With the above piece of code, what the 
EF will do, this will go in the SQL 
Server and find all the movies from the 
database and present them in the list. 
Now, since this connection is a 
disposable resource, hence I need to 
override the dispose method and tell it 
that if that is not null, dispose the same. 
Thus, the dispose API in .Net is just a 
way to clean things up for you. 

Now, once you go ahead and do build 
here, it will obviously throw couple of 
compiler error and the reason being for 



it that we have modified the class 
definitions. So, for the time being you 
can just go ahead and comment out the 
“ MovieReviews ” Controller code 
completely. There is one more change 
you need to do is in the Layout view 
where in you are displaying the Best 
Reviews, comment out this as well. 

Now, once the controller methods are 
done, next step is to fix the view. I'm 
already having the view created, just 
need to modify the same so that it will 
be bound to strongly typed movie class 
Below, is the modified Index view for 
the same. 



@ model IEnumerable<MovieReview.Model<> Movie> 

@{ 

ViewBag.Title = "Home Page"; 

$ 


@foreach (var item in Model) 

{ 

<div> 

h4 @item.MovieName h4 > : br /> 
h5 : @item.DirectorName h5> 
li? @item ReleaseYear h5> 
hr /> 

</div> 

} 

But, at this point of time I don't have 
database associated yet. But, let me 
build and run the app, and let's see the 
behavior of the application. So, as you 


can see below in the screenshot, it just 
produced me the home page without data 
obviously, but didn't present any error. 
What was the reason for this? 



So, to anwser this question, let me go 
ahead and view the Server Explorer and 
add a connection. 




This is going to be the SQL Server 
connection. And then I am going to 
specfiy the “ASqlexpress ” , as the server 
name which I am intrested in and then 
when I click on the databases dropdown, 
I can see that there is one database 
already created with the 
nam e“MovieReview.Models.MovieDb' . 



Data source: 

Microsoft SQL Server (SqlClient) 

Server name: 

ASqlExpress 

Log on to the server 


Change- 


Refresh 


(•' Use Windows Authentication 
O Use SQL Server Authentication 

Username: | 

£as sword: 

1~1 Save my password 

Connect to a database 


o Select or enter a database name: 




Of 


master 

model 


MovieReview.Models.MovieDb 


msdb 

t empdb 


Advanced... 


Test Connection 


OK 


Cancel 



So, this is the database which EF 
created for me, because the name of the 
db matches the name with the class name 
which I have given. So, by default when 
you instantiate and query, and if EF 
doesn't find any database and you have 
no configurations done for the same, it 
will just create one with the class name 
in SqlExpress. 



Server Explorer •» -p X 

« | *■ + = S* I 

■a g> Data Connections 


a Q wn7x64-lb3r5zl\sqlexpress.MovieReview.Models.MovieDb.dbo 


a Tables 

a MovieReviews 

tts» Id 

@ ReviewerName 
§ ReviewerCom merits 
@ ReviewerRating 
§ Movield 
a ^ Movies 
irO Id 

§ MovieName 
§ DirectorName 
@ ReleaseYear 
|> Views 

> Stored Procedures 

> Functions 

> #t: Synonyms 

> ! Types 

> Assemblies 

> ™ Servers 

> as SharePoint Connections 

> SS Windows Azure 


Now, in the above screen shot, you can 


see the two tables which EF created 
based on classes which we have 
created. Now, if you do ShowData in 
one of the tables, that will obviously 
result null values, hence home page 
doesn't produce any result as such. But, 
to test this theory, let me go ahead and 
put some values in the table. 


dbo.M< 

c; 

Dvies [Data] -t> X 

HomeController.es MovieDb.es Movie.es 

1 > Max Rows: 

1000 ^1 U rfl 



Id MovieName DirectorName ReleaseYear 



J NULL 


NULL 


NULL 


NULL 



HomeController.es 


MovieDb.es 


Movie.es 


dbo. Movies [Data] -fc X 


« 1 ► 

Max Rows: 1000 

3 n a 



Id 

MovieName 

DirectorName 

ReleaseYear 


1 

Avatar 

James Cameron 

2009 


2 

Titanic 

James Cameron 

1997 


3 

Die Another Day 

Lee Tamahori 

2002 

►* 


NULL 

NULL 

NULL 


Now, when you save the same and 
refresh the page. It should obviously 
produce me the desired result. 



Select One Home About Contact Reviews 





Die Another Day 






Now, let me change the view a bit and 
make it more descriptive. 

namespace Movie Review. Models 

{ 

public class MovieDb :DbContext 

{ 

public MovieDbO 

: base("name=DefaultComiection") 

{ 

} 

public DbSet<Movie> Movies { get; set: } 

public DbSet<MovieRe\iews> MovieReviews { get; set; } 

} 

} 


Now, when I refresh the page, it will 
produce me the below result. 


Database Migrations:- 


Now, the next thing is database 
migartions. In this section, we'll discuss 
how to influence EF so that I can 
provide my custom settings saying like 
where to create the database, what could 
be the database name, table name etc. 

So, we can obviously configure data 





Context with the specific connection 
string. 

In order to achieve the same, we need to 
call the base class constructor and then 
we can provide the explicit connection 
string with default settings as shown 
below. But, it's obviously a good 
practice not to hard code things like 
connection string, because this will 
create dependency always to compile 
the solution, just for changing the 
database name. So, it's a good idea to 
specify the same in web.config file and 
fetch the same from here itself. 


<comiectionStrings> 

<add name— ’DefaultConnection" connectionString="Data Source=ASQLEXPRESS;Initial 
Catalog=MoviesReview:Integrated Security=SSPI;AttachDBFilename=IDataDirectoryi'MoviesReview.mdf' 
providerName— 'System. Data. SqlClient" /> 

</connectionStrings> 


In the above snippet, I have just 
modified the default value presented to 
me by visual studio by my custom value 
And now, to use the same I just need to 
specify the connection name in the 
constructor as shown below. 

using System; 

using System.Collections. Generic; 
using System.Data .Entity; 
usmg System.Linq; 
using System. Web; 


namespace Movie Review. Models 

{ 

public class MovieDb :DbContext 

{ 

public MovieDbO 

: base(”name=DefaultConnection") 

{ 

} 

public DbSet<Movie> Movies { get; set: } 

public DbSet<MovieReviews> MovieReviews { get; set; } 

} 

} 

Now, when I build the app and refresh 
the page, all the values will be wiped 
out as we are now pointing to the new 
database. 


C D loeahost 


Select One Home About Contact Reviews 


Now, in order to prove the theory that 
new database has been created with my 
custom settings, just click on the show 
all files symbol in the solution explorer 
and then expand the “App Data” folder, 
it will list me my custom database as 
well. 


a App_Data 

> |_j aspnet-MovieReview-20140425100427.mdf 

> [_! MoviesReview.mdf 




1 st one is the default one. 2 nd one is the 
one which I created just now. We can 
also put some default values same way 
what we did earlier. But, that's ok we 
know how to play around. So, moving 
ahead now think on the point that how 
could we influence the schema and how 
could we ensure that it will present 
some sample data to test my app. And to 
answer both of these questions, we need 
to make use of EF-Migrations. 

Migartions are basically one of the 
features of EF that enable you to 
configure database schema, seed your 
database and then track the changes that 
you are making in the entity classes 
which you have created earlier. So, 



basically this feature enable you to keep 
the database in sync with the changes 
which you are making during the course 
of development. So, to get started with 
Migartions, go to “ Package Manager 
Console In order to open the same, 
either you can go to 


TOOLS 

| 


TEST ARCHITECTURE ANALYZE WINDOW HELP 


Attach to Process... 

Ctrl* Alt* P 

Connect to Database... 


Connect to Server... 


Add SharePoint Connection... 


SQL Server ► 

Code Snippets Manager... 

Ctrl+K, Ctrl+B 

Choose Toolbox Hems... 

Add-in Manager... 


Library Package Manager 

► 

Extensions and Updates... 


Create GUID 


Error Lookup 


PreEmptive Dotfuscator and Analytics 


Spy ++ 


Spy** (x64) 


WCF Service Configuration Editor 


External Tools... 



Import and Export Settings... 
Customize... 

Options... 




ES3 Package Manager Console 
& Manage NuGet Packages for Solution... 
ifi Package Visualizer 
0 Package Manager Settings 



Or directly type in the Quick Launch 
Window, this will open the console for 
you. I am quite habituated with this 
approach. Now, package manager 
console will open as another window in 
the Visual Studio itself. 

CD T8 packa XI _ [5 

Most Recently Used a) 3hu | Sa hay 

ESS View — Other Windows — Package Mana ger Console 

Menus (8) j View — Other Windows — Package Manager Coi 

View — Other Windows — Package Manager Console 
$ Project — Manage NuGet Packages... 

[j^ Project — Enable NuGet Package Restore 

Debug — Graphics — Debug Installed App Package... 

Tools — Library Package Manager — Package Manager Console 
& Tools — Library Package Manager — Manage NuGet Packages for Solution- 
is Tools — Library Package Manager — Package Visualizer 
0 Tools — Library Package Manager — Package Manager Settings 
Options (2) 

0 Package Manager — Package Sources 
0 Package Manager — General 

NuGet Packages (1) 

Search Online for NuGet Packages matching 'packa' 


<> A - 
cts) 

-2014042510 


It's basically a NuGet command line. So, 
now in there I need to enable the 
migrations. Now, with below mentioned 
command I also need to specify the 
“ context TypeName” . So, basically 
“ dbContext” name in which I want to 
enable migrations. 

“ Enable-Migrations - 
ContextTypeName MovieDb”. Now, 
upon running this poweshell command, it 
will add a new folder to my solution and 
the new folder is called “Migrations” . 


- ? X 


531 Solution 'MovieReview' (2 projects) 
a MovieReview 

> f* Properties 

> References 

a App_Data 

> aspnet-MovieRevi ew-20140425100427 . m df 

> |_j MoviesReview.mdf 

> App_Start 

> rj bin 

> Content 

> Controllers 

t> Filters 

> Images 

a Migrations 

a c« 201405102004410 JnitialCreate.es 

> 201405102004410JnitialCreate.Designer.cs 
201405102004410 JnitialCreate.resx 

> ^5 InitialCreate 

> c* Configuration.es 

Now, let's dig inside the file. So, when 
you open the Configuration class, you 
will come to know that configuration 
class is all about controlling Code First 


Migrations. Settings like performance, 
when should it run etc. 


namespac e MovieReview .Migrations 

{ 

using System; 

using System . Data . Entity : 

using System.Data .Entity .Migrations ; 

using SystemLinq; 

internal sealed class Configuration : DbMigrationsConfiguration<MovieRevi 

{ 

public ConfigurationO 

{ 

AutomaticMigrationsEnabled = false; 

} 


// context.People.AddOrUpdate( 

// p => p.FullName. 

// new Person { FullName = "Andrew Peters" }, 
// new Person { FullName = "Brice Lambson" }, 
// new Person { FullName = "Rowan Miller" } 

// ); 

} 

} 

} 

Now, in the above code snippet, if you 
see, there is one setting which sets 
‘ L A utom ati cMigrati onsEn abled ” By 
default, it is set to false which means 
that EF won't make any changes unless 
you explicitly tell the EF to do so. But, 
during development, it is good idea to 
set it true. Because you would be 
changing different entities or adding few 


other entities for your testing purpose. 
Another nice thing about this 
configuration file is the seed method. 
This is the place wherein you instruct EF 
to push some initial data. So, everytime, 
when it's going to update the database, it 
will invoke the seed method and hence 
populate the tables. 


protected override void Seed(MovieReview.Models.MovieDb context) 

( 

// This method will be called after migrating to the latest version. 

context. Mo vies. AddOrUpdate(r => r.MovieName. 

new Movie { MovieName = "Avatar". DirectorName = "James Cameron", ReleaseYear = "2009" }, 
new Movie { MovieName = "Titanic". DirectorName = "James Cameron". ReleaseYear = "1997" }, 
new Movie { MovieName = "Die Another Day". DirectorName = "Lee Tamahori". ReleaseYear = 

" 2002 " }, 

new Movie 

{ 

MovieName = "Godzilla", 

DirectorName = "Gareth Edwards", 

ReleaseYear = "2014", 

reviews = new List<MovieReviews>{ 

new MovieReviews{ReviewerRating=5.ReviewerComments="Excellent".ReviewerName— 'Rahul 

Sahay"} 


}); 


} 


Now, let me explain the above piece of 
code. So, now this is going to the 
MovieDb context and saying add or 
update the following Movies. So, it 
means before adding or updating the 
same in the database, it basically checks 
based on the MovieName, whether the 
same movie exists or not, if yes, then it 
will update or it will just add a new 
record to the database. However, for the 
last record it will push review in the 
database as well. This is one of the best 
ways to push some test data into the db 
to test your app. Now, inorder to push 
these values or update these values in 
the database, again we need to use 
NuGet command as shown below:- 



“ Update-Database - Verbose 

However, for the 1 st update, Verbose has 
nothing much to add, as we haven't done 
any changes yet in the entities. But, 
Verbose is going to be extremely useful 
later in the course. But, for now just run 
the command. 



Once, the update command is completed, 
we should be able to see the change in 
the database. Let's go to the server 
explorer and open the table to view the 


same. 



Configuration.es 


Configuration.es 


Web.config 


dbo.Movies [Data] -e X 


« 1 % 

Max Rows: 1000 

31 IT s> 



Id 

MovieName 

DirectorName 

ReleaseYear 

► 

3 

Godzilla 

Gareth Edwards 

2014 


2 

Avatar 

James Cameron 

2009 


3 

Titanic 

James Cameron 

1997 


4 

Die Another Day 

Lee Tamahori 

2002 

* 

[NULL 

NULL 

NULL 

NULL 


Configuration.es Configuration.es Web.config 


a % 

Max Rows: 1000 

3 n - & 




Id 

ReviewerName 

ReviewerCom... 

ReviewerRating 

Movield 

► 

3 

Rahul Sahay 

Excellent 

5 

1 

* 

NULL 

NULL 

NULL 

NULL 

NULL 


So, my both the tables have been 
successfully updated. Now, let's run the 
app, and see whether correct values are 
populating or not. 



Name - Godzilla 

Director - Gareth Edwards 
Release Year - 2014 

Name - Avatar 

Director - James Cameron 
Release Year - 2009 

Name -Titanic 

Director - James Cameron 
Release Year - 1997 

Name - Die Another Day 

Director - Lee Tamahori 
Release Year - 2002 



So, it looks like app is running fine. 


LINQ:- 

Now, we have setup our database 
successfully. Now it's time to move 
ahead and use LINQ to query against the 
database, and also to save the records in 
the database. I am assuming that you 
guys are having some sort of familiarity 
with LINQ (Language Integrated 
Query). However, in order to do deep 
dive with LINQ, please refer MSDN 
document! http://msdn.microsoft.com/ei 
us/library/bb3 9 7933. aspx ) for the same. 
In this segment I am just going to use 


those queries only which are useful in 
terms of the current application. 
However, few basic things let me brief 
you about LINQ queries, say these LINQ 
queries are strongly typed. So, it means 
if you change the structure of the class, 
then these LINQ queries will also get 
impacted. Remember, the 
“ MovieReview ” controller code which I 
have commented because I have changed 
the entities definition, hence the query 
broke. There are many targeted things 
which you could easily do with LINQ 
queries like projecting, filtering, 
joining etc. There are specific 
keywords in C# which let you do the 
same. We'll see some of these in action 
later in this segment. Now, let's go ahead 



and use some of the queries in our 
example. 

public ActionResult IndexO 
{ 


var model = from m in _movieDb.Movies 
orderby mMovieName 
select m; 

return View(model); 

} 

In the above section, I am querying 
against the Movies table using the db 
context wherein am listing the movies 
based on the movies name in ascending 
order. Now, if I build and refresh the 
page, it will produce me the below 
result. 


Select One 


About Co 


Name Avatar 
Director - James Cameron 


Name Die Another Day 
Director- Lee Tamahori 



This was one of the basic queries which 
we usually write. Now, let me go ahead 
and try some other thing, how about 
listing the movies based on the reviews, 
means any movie which has received 
higher no of reviews is going to appear 
1 st in the list. In order to achieve the 
same, I just need to modify the query a 
bit. 





public ActionResult IndexO 

{ 


var model = from m in _movieDb.Movies 
orderby mMovieName 
select m: 

return View(model); 


} 


orderby m.reviews.Coimt() descendmg 
select m: 

return View(model); 

} 

Now, with the above piece of code in 
place, I should be getting Godzilla 1 st . 


Select One 


About Contact Revie 


Name Godzilla 


Name - Avatar 


Name -Titanic 


So, here what this LINQ query is doing; 
taking the LINQ query and transalting the 
same into a query which is understood 
by Sql Server and then bringing back the 
result but again before producing the 
result, it just transforms the result into 
object which I could use in C# code. 
Now, let me try one more thing, how 
about producing a result which is also 
showing the no of reviews associated 
with movie. 



In order to achieve the same, I need to 
make use of ViewModel, ViewModel is 
again a data- storage concept for the 
views, this is basically used to simplify 
our query, or to make the query strongly 
typed against one. So, I need to create 
one class and then need to put the 
properties which I am intrested in. 


( * 

<a Ife - * o ® ft 1 <> f- — 

- SIMM. P ' 




Now, I am going to use the above class 
in the model shown below:- 


public ActionResult IudexO 

{ 


var model = from m in _movieDb.Movies 

orderby m. reviews . CoirntO descending 
select new Movie ViewModel 
{ 

Id = mid 

MovieName = m.MovieName, 
DirectorName = m.DirectorName. 
ReleaseYear = m.ReleaseYear. 
NoOfReviews = m.reviews.CouutO 

}; 

return View(model); 

} 

So, viewModel is basically going to 
carry the information which the view 
needs to display Now, I also need to 
modify my Index View. So, now my 


view looks like 


@inodelIEuumerable<MovieReview.Modeh.MovieViewModel> 

@{ 

ViewBag.Title = "Home Page"; 

i 

@foreach (var item in Model) 

{ 

<div> 

<h4>Name - @item.MovieName< h4><br /> 
<h5>Director - @itein.DirectorName< h5> 
<h5>Release Year - @item.ReleaseYear- li5> 
<h5>No Of Reviews - @item.NoOfReviews< 'h5> 

<hr /> 

</div> 

} 

Now, when I build and refresh the page, 
it will produce me the below output. 


Search Query: - 


Now, the next feature which I want to 
discuss is the filtering facility in the 
application. So, in order to achieve the 
filtering I just need to add one parameter 
in the Index method say “SearchQuery” . 
So, I'll allow users to provide one 
filtering criteria to search the result. By 





default it would be null. 


public ActionResult Index(stnng SeaichQuery = null) 

{ 


var model = _movieDb. Movies 

.OrderByDescending(m => mreviews.C'ountO) 


Where(m => SearchQuery = null | mMovieName. Starts With(SearchQuery)) 
Take(3) 

Select(m => new MovieViewModel 

{ 

Id = m. Id. 

MovieName = mMovieName. 

DuectorNanie = mDirectorName, 

Release Yeai' = m. Release Year. 

NoOfReviews = ln.reviews.CountO 

}): 

return View(model); 

} 

Now, what this above query is doing? If 
SearchQuery is null, it will return all the 
movies. However, if SearchQuery 
matches some of the text, then it will 


return the desired result. You also might 
have noticed, that I changed the LINQ 
query completely from the above 
section, just to make sure that I can use 
pagination. 

Because later in coming chapter, we'll 
discuss the same. However, this kind of 
query is also referred as using 
“ Extension Methods ”. Now, in order to 
verify whether the same is working 
correctly or not, just build the app and 
refresh the page. 



1 Cl localhost:1033 

Select One Home 


o Register 


Name - Godzilla 

Director - Gareth Edwards 
Release Year-2014 


Name - Die Another Day 

Director- Lee Tamahori 
Release Year -2002 
No Of Reviews -0 

Name Titanic 

Director James Cameron 
Release Year -1997 


So, now it's listing only 3 records. Now, 
to test the search criteria, let's pass in 
the value as query string and then search. 



Select One Home About Contact Reviews o Login 


Name - Godzilla 

Director - Gareth Edwards 
Release Year- 2014 
No Of Reviews ! 


So, in the above screen shot I have 




passed in “G” as search parameter 
which worked correctly and fetched the 
appropriate result. That's nice, but from 
the end user's perspective but, let's give 
user; ability to enter the Search Text in 
the form itself. So, for that we need to do 
little bit of modification in the view 
itself. 



@model IEnumerable<MovieReview.Modds.MovieViewModel> 

@{ 

ViewBag.Title = "Home Page"; 

l 

<div> 

<form method="get"> 

<mput type="seareh" elass="form-control lias-suecess" name="SearchQuery"> 

<br /> 

< input type="submit" class-'btn-pnmary" value-' Search by Movie Name" /> 
<form> 

<div> 


@foreach (var item in Model) 

{ 

<div> 

<h4>Name - @item Mo\'ieN ame< h4xbr /> 

<h5>Dueetor - @item.DirectorName i h5 > 

<h5>Release Year - @item. Release Year<li5> 

<h5>No Of Reviews - @item.NoOfRe\iews<li5> 

<hr/> 

</div> 

} 

Now, in the above case, if you have 
noticed that I have introduced one div 
section where in I have used one form 
control. Couple of important point to 


note here, is like form method should be 
“get”, so that it can go ahead and call the 
index method and then name which is 
equal to “SearchQuery”, this should be 
the same as I have used in the MVC 
Index method, then only it can identify 
the query string parameter. Now, when I 
refresh the page, it will produce me the 
below UI. 



Now, when I type something in search 






box and do the search query, it should 
produce me the same result, what it 
produced earlier like shown below. 



One point to note here, because of form 
method “get” , the search string appears 
in the query string. So, when you click 
on the submit button for a form which 
issues a get request, it will encapsulate 
all the input values and put the same in 
the query string. On, the other hand, if 
we would have used post method, then 






in that case all the values would have 
been encapsulated within http Message 
body. One must understand the 
contrasting difference between get and 
post operation, before using them. Get 
operations are basically search 
operations and Post operations are write 
operations where in you are writing 
something to the database. 


Summary:- 

So, in this chapter, we have started 
working on real time database by setting 
it up and running. We have also seen 
how Entity Framework works in real 
time. We have seen the contrasting 


difference between EF Default settings 
and custom settings. We have also 
pushed the values manually and using 
migrations in the database. For using the 
same we have seen couple of NuGet 
commands in action. We have also 
covered different kind of mature FINQ 
queries to use against the database. And 
last but not the least we have enabled 
search facility for the user to search the 


movie. 



Chapter 5: Data 
modeling- Part 2 

WHAT DO you find in 
this CHAPTER? 


=> Introduction 


Organizing Movie 


Controller 


=> Reviews Listing 

=> Create and Edit Facility 
of Review 

=> Validation Annotations 
=> Summary 


Introduction:- 

Hi, good to see that you guys have been 
enjoying the book and reached the 2 nd 
part of data modeling. So, far in this 
journey we have done quite a significant 
piece of development and in this chapter, 


we will be extending the data model part 
which we have started in the last 
chapter. So, without wasting time, let's 
get back to business. 


Organizing Movie 
Controller: - 

Now, in this section what we are going 
to implement CRUD operation. So, in 
this section we are going to have a 
movie controller which will do all these 
things for me. Let's go ahead and create 
a Movie controller to manage all these 
things for me. So, the very 1 st thing 
which I am going to do here is replace 
the link which has been producing 


reviews so far, because I have already 
removed that controller. Now, in here I 
have introduced new controller as 
‘ L Mo vi es Controller' ’ . 


<div class="navbar-collapse navbar"> 

<ul class="nav navbar-nav"> 

<li>@Html.ActionLink("Home", "Index", "Home")</li> 
<li>@Html.ActionLink("About", "About", "Home")</li> 
<li>@Html.ActionLink("Contact", "Contact", "Home”)</li> 
<li>@Html .ActionLink("Movies", "Index", "Movies" )</li> 
<li>§Html . Partial( "_LoginPartial" )</li> 

</ul> 

</div> 


Above snippet is the modified example 
for the same. However, I am going to 
create Movies controller as I haven't 
created that. While creating the 
controller I am going to select the option 
MVC controller with “ Read/Write 
actions with Entity Framework’'. I will 
also provide Model class and data 


context class as shown below. 



Now, when I click on add, Visual studio 
will go ahead and all the required 
components for me which will allow me 
to save a new record to the database, to 
query the database and also provide all 
the required views which I need in the 



views folder. And, once this action is 
completed it will simply open all these 
files in the editor itself. Below, is the 
sample snapshot that how it looks in 
solution explorer. 



^ a Controllers 


> c* AccountController.es 

> c* HomeController.es 

l> C* MovieReviewsController.es 

> C* MoviesController.es 

> Filters 

> Images 

> Migrations 

> Models 

> Cl °bj 

> Scripts 

a Views 

> Account 

> Home 

t> MovieReviews 

^ a Movies 

[@] Create.cshtml 
[@] Delete.cshtml 
[@] Details. eshtml 
[@] Edit.cshtml 
[@] Index.cshtml 


So, now let's build the application and 



try the same. Now, based on my code 
structure what we have selected while 
building the Movies Controller, it has 
given me boiler plate code for all the 
CRUD Operation. Now, below is the 
sample snippet which is being generated 
by visual studio and given to me. 



using System; 

using System. Collections .Generic; 

using System. Data; 

using System. Data . Entity; 

using System. Linq; 

using System. Web; 

using System. Web. Mvc; 

using MovieReview. Models; 

namespace MovieReview . Controllers 

{ 

public class MoviesController : Controller 

{ 

private MovieDb db = new MovieDb(); 


// 

// GET : /Movies/ 


public ActionResult Index() 

{ 

return View(db. Movies. ToListQ); 

} 

II 

// GET: /Movies/Details/5 

public ActionResult Details(int id = 0) 

{ 

Movie movie = db. Movies. Find (id); 
if (movie == null) 

{ 

return HttpNotFound( ); 

> 

return View(movie); 

} 

II 

II GET: /Movies/Create 

public ActionResult CreateQ 

{ 

return View(); 

> 

1 / 

II POST: /Movies/Create 
[HttpPost] 

[ValidateAntiForgeryToken] 

public ActionResult Create(Movie movie) 

{ 

if (ModelState.IsValid) 

{ 

db. Movies .Add (movie); 

db.SaveChanges( ); 

return RedirectToAction( "Index" ) 

> 

return View(movie); 

> 

II 

II GET: /Movies/Edit/5 



public ActionResult Edit(int id = 0) 

{ 

Movie movie = db. Movies . Find (id) ; 
if (movie == null) 

{ 

return HttpNotFound( ) ; 

> 

return View(movie); 

> 

u 

// POST: /Movies/Edit/5 
[HttpPost] 

[ValidateAntiForgeryToken] 

public ActionResult Edit(Movie movie) 

{ 

if (ModelState. IsValid) 

{ 

db. Entry (movie) .State = EntityState .Modified 

db.SaveChanges( ) ; 

return RedirectToAction( "Index" ); 

> 

return View (movie); 


// 

// GET: /Movies/Delete/5 

public ActionResult Delete(int id = 0) 

{ 

Movie movie = db. Movies . Find (id); 
if (movie == null) 

{ 

return HttpNotFound( ); 

> 

return View(movie); 

> 

1/ 

II POST: /Movies/Delete/5 

[HttpPost, ActionName( "Delete" ) ] 

[ValidateAntiForgeryToken] 

public ActionResult DeleteConfirmed(int id) 


{ 

Movie movie = db. Movies . Find(id); 
db .Movies . Remove (movie) ; 
db . SaveChanges ( ) ; 
return RedirectToAction ( "Index" ) ; 

} 

protected override void Dispose(bool disposing) 

{ 

db.Dispose(); 

base .Dispose (disposing); 

} 

} 

> 


Now, let's see, how the app looks like 
when I go to the Movies Link. 


0 localhost:1033/Movies 


© Register 

Select One Home About Contact Movies o Log in 


Index 

Create New 

MovieName Director Name ReleaseYear 

Godzilla Gareth Edwards2014 Edit | Details | Delete 

Avatar James Cameron 2009 Edit | Details | Delete 

Titanic James Cameron 1997 Edit | Details | Delete 

Die Another DayLee Tamahori 2002 Edit | Details | Delete 


Now, as you can see there is different 
link associated for each movie. Each of 
these links is the part of CRUD 
operation. Now, with this above view I 
should be able to create a new movie 
just by typing the required values in 
there. So, let's do that. 



Now, when I click on the link Create, it 
will create one new movie in the 
database with the above inputs as shown 
below. 

| Q local host:1033/Movies 


Select One Home About Contact Movies 


Index 



Godzilla Gareth Edwards2014 Edit I Details I Delete 

Avatar James Cameron 2009 Edit I Details I Delate 

Titanic James Cameron 1997 Fdll I Details I Delete 

Die Another DayLeeTamahori 2002 Edit I Details I Delete 
Spider Man Kevin Brauss 2014 Edit I Details I Delete 


Now, we can also verify the same in the 




database also. Let' s do that as well. 


dbo. Movies [Data] X 


Edit.cshtml 


MoviesController.es 


Index.cshtml 


C2 > Max Rows: j 1000 £T 


Id 

MovieName 

DirectorName 

ReleaseYear 

► \T~ 

Godzilla 

Gareth Edwards 

2014 

^2 

Avatar 

James Cameron 

2009 

3 

Titanic 

James Cameron 

1997 

J 4 

Die Another Day 

Lee Tamahori 

2002 

5 

Spider Man 

Kevin Brauss 

2014 

* \NULL 

NULL 

NULL 

NULL 


So, as you can see that new record has 
been inserted in the database. Now, let 
me try other things like checking Edit 
and Delete functionality as well. Let, me 
go ahead and change the Title of “Spider 
Man ” to “ Spider Man 2” and see if that 
works. 



Now, when I save the same it will take 
the effect. 


I oca host 



So, in the above screen shot you can see 
the change. However, I have changed the 





director name as well. Now, when you 
refresh the database, you will obviously 
see the change. Let's try that also. 


dbo.Movies [Data] 

H Edit.cshtml 

MoviesController.es Details.cshtml 

(d Max Rows: 1 1000 

3l n a 



Id 

MovieName 

DirectorName 

ReleaseYear 

► 

a 

Godzilla 

Gareth Edwards 

2014 


2 

Avatar 

James Cameron 

2009 


3 

Titanic 

James Cameron 

1997 


4 

Die Another Day 

Lee Tamahori 

2002 


5 

Spider Man 2 

Marc Webb 

2014 

* 

\NULL 

NULL 

NULL 

NULL 


So, you can see that the record has been 
modified. Now, let's try deleting the 
same and check how it works. So, when 
you click on delete link against the 
movie, it will not directly delete the 
record in the 1 st go. 1 st it will present the 
details for you in one simple list and ask 
for your confirmation. So, if you click 



“ Delete ” button on this confirmation 
screen, then only it will go and delete 
the record. 


o Register 

Select One Home About Contact Movies o Login 

Delete 

Are you sure you want to delete this? 

Movie 


Spider Man2 
Marc Webb 



So, above screen shot is the 
co nfi rmation screen where in it's asking 
you to confirm before deletion. Now, 
when you click on the delete button, it 
will simply go and delete the record. 



Select One 


Index 


Edit I Details I Delete 
Edit I Details I Delete 
Edit I Details I Delete 

Edit I Details I Delete 


So, as you can see in the above screen 
shot that “ Spider Man 2 ” has been 
deleted. Let's re-co nfi rm the same from 
the database side as well. 


dbo. Movies [Data] -e X 


MoviesController.es 


Details.cshtml 


Q | % 

Max Rows: 1000 

3 jj & 



Id 

MovieName 

DirectorName 

ReleaseYear 

► 

a 

Godzilla 

Gareth Edwards 

2014 


2 

Avatar 

James Cameron 

2009 


3 

Titanic 

James Cameron 

1997 


4 

Die Another Day 

Lee Tamahori 

2002 

* 

NULL 

NULL 

NULL 

NULL 


Now, one point to note here, that there is 





a significant difference between the UI 
which I am presenting here, and which 
you may encounter during development 
as Visual Studio will present a basic 
plain template, which I have changed 
according to my convenience by using 
different bootstrap class names, form 
controls etc. So, in order to get the same 
feel, either you can download the source 
code from the 

gi thub ( h tips ://"ith ub. com/rahulsahayl j 
Review ) or you can download your 
desired UI Theme and style it your way 

Now, this all CRUD operation happened 
without my explicit code or without any 
additional code. This all happened 
because of the scaffolding template 


which I have selected while making the 
“ Movies ” controller. So, thanks to 
Visual studio for saving time and effort 
for doing the most obvious thing while 
writing any app from the scratch. Let's 
looks at the controller code for a minute 
and understand what it is doing under the 
hood. 

using System; 

using System. Collections .Generic; 
using System. Data; 
using System. Data . Entity; 
using System. Linq; 
using System. Web; 


using System. Web. Mvc; 
using MovieReview. Models ; 


namespace MovieReview . Controllers 

{ 

public class MoviesController : Controller 

{ 

private MovieDb db = new MovieDb(); 

// 

/ / GET : /Movies/ 

public ActionResult Index() 

{ 

return View(db. Movies. ToListQ); 

> 

// 

// GET: /Movies/Details/5 

public ActionResult Details(int id = 0) 

{ 

Movie movie = db. Movies. Find(id); 
if (movie == null) 

{ 

return HttpNotFound( ); 

} 

return View(movie); 

} 

// 

// GET: /Movies/Create 

public ActionResult Create() 

{ 

return View(); 

> 

// 

// POST: /Movies/Create 
[HttpPost] 

[ValidateAntiForgeryToken] 

public ActionResult Create(Movie movie) 

{ 



if (ModelState. IsValid) 

{ 

db . Movies . Add ( movie ) ; 

db.SaveChanges( ); 

return RedirectToAction( "Index"); 

> 

return View(movie); 

> 

n 

// GET: /Movies/Edit/5 

public ActionResult Edit(int id = 0) 

{ 

Movie movie = db. Movies . Find (id); 
if (movie == null) 

{ 

return HttpNotFound( ); 

> 

return View(movie); 

> 

II 

II POST: /Movies/Edit/5 
[HttpPost] 

[ValidateAntiForgeryToken] 

public ActionResult Edit(Movie movie) 

{ 

if (ModelState. IsValid) 

{ 

db. Entry (movie) .State = EntityState .Modified 

db.SaveChanges( ) ; 

return RedirectToAction( "Index"); 

> 

return View(movie); 

> 

II 

II GET: /Movies/Delete/5 

public ActionResult Delete(int id = 0) 

{ 

Movie movie = db. Movies . Find(id); 


if (movie == null) 

{ 

return HttpNotFound( ); 

} 

return View(movie); 

} 

// 

// POST : /Movies/Delete/5 

[HttpPost , ActionName( "Delete" ) ] 

[ValidateAntiForgeryToken] 

public ActionResult DeleteConfirmed(int id) 

{ 

Movie movie = db. Movies . Find(id); 
db. Movies . Remove (movie); 
db . SaveChanges ( ) ; 
return RedirectToAct ion ("Index"); 

} 

protected override void Dispose(bool disposing) 

{ 

db.Dispose(); 

base .Dispose (disposing ) ; 

> 

> 

> 


Now, if you look at the controller code, 
you could easily see that it instantiated 
“ MovieDb ” for me, gave me an Index 
action which has shown all the movies. 
Associated to the database connection, 
you could see that it also gave me one 
“ Dispose ” method to make sure things 
got cleaned up. So, basically the idea 
behind this Scaffolding or boiler plate 
code is that it gives you a very good 
starting point. From here, you could 
obviously jump start into an application 
and test your various scenarios. One 
point to understand here, that you cannot 
write complete CRUD operation by just 
selecting the scaffolding template for any 
enterprise application. In real world 
scenario, there are very few applications 



which are that simple. 


But, it does give a simple codebase to 
get started. So, right now I am not going 
delve into each of these controller's 
action as we will see one by one as we 
progress in the application. But, just for 
the sake of understanding we could 
discuss one Controller action here that is 
“ Detail ” action. So, it's also very simple 
method written over here, it will look 
for the id of the movie and then using the 
“Movies” Dbset, it will fetch the 
information If om the database. So, it 
will return the record based on the 
“Movie I(F and if it doesn't find the 
Movie in database, then it will simply 
return 404 error message. Now, let's 



check the same by tweaking the value in 
the browser. 



So, if you can see in the above 
screenshot, I have requested for the 
“ id(5 )” which doesn't exist and hence, it 
returned 404 message to the browser. 
But, obviously you could go ahead and 
override these kind of browser message 
by simply creating one view and 
returning the same if id not found. 


Reviews Listing: - 


Now, let's go ahead and think of the 
options of listing the reviews link 
against the movie associated. So, what I 
am going to do here is; I am going to 
introduce one more link in the index 
page so that it will list Reviews for the 
associated movie. Now, with the below 
snippet in place it will simply grab the 
reviews associated with the Movie. 


@model ;IEnumerable<MovieReview. Models .Movie> 


ViewBag. Title = "Index"; 

1 

<h2>Index</h2> 

<P> 

@Html .ActionLink( "Create New''^ "Create") 

</p> 

<table> 

<tr> 

<th> 

@Html .DisplayNameFor (model => model .MovieName) 
</th> 

<th> 

@Html .DisplayNameFor (model => model . DirectorName) 


</th> 

<th> 

@Html.DisplayNameFor( model => model . ReleaseYear) 

</th> 

<thx/th> 

</tr> 

@foreach (var item in Model) { 

<tr> 

<td> 

@Html .DisplayFor(modelItem => item.MovieName) 

</td> 

<td> 

@Html .DisplayFor(modelItem => item.DinectorName) 

</td> 

<td> 

@Html .DisplayFor(modelItem => item. ReleaseYear) 

</td> 

<td> 

@Html .ActionLink("Edit", "Edit", new { id=item.Id }) | 
@Html.ActionLink("Details", "Details", new { id=item.Id }) | 

@Html .Action Link ("Reviews", "Index", " MovieReviews", new { id = 
item. Id }, null) | 

@Html .ActionLink("Delete", "Delete", new { id=item.Id }) 

</td> 

</tr> 

> 

</table> 


So, now, when I refresh the page then I 
can see the newly generated link appear 
on the page. 


Q local hostl033/Movies 


* Register 

Select One Home About Contact Movies o Login 


Index 


Godzilla Gareth Edwards 20 1-1 Edit I Details I Reviews I Delete 

Avatar James Cameron 2009 Edit I Details I Reviews I Delete 

Titanic James Cameron 1997 Friit I Details I Reviews I Delete 

Die Anot her DayLee Tamahori 2002 Edit I Details I Reviews I Delete 


But, when I click on the associated 
Reviews Link, it will produce me the 
below 404 error for obvious reasons 
because I haven't modified the 
commented code in the controller yet. 


«- -» C D localhostlO.U/Rrviews/IndCT/l 

Server Error in '/' Application. 

The resource cannot be found. 


So, now let's go ahead and uncomment 
the “ MovieReviews ” controller code and 




delete the unexpected action methods 
So, at this point of time, I need only 
index action. But, we do need our 
context here. So, my final modified 
controller looks like below snippet. 



using MovieReview. Models; 
using System; 

using System. Collections .Generic; 
using System. Linq; 
using System. Web; 
using System. Web. Mvc; 

namespace MovieReview. Controllers 

{ 

public class MovieReviewsController : Controller 

{ 

MovieDb _db = new MovieDb(); 

// 

// GET: /MovieReviews/ 

public ActionResult Index( [Bind(Prefix="id"] int movield) 

{ 

var movie = _db .Movies . Find (movield ) ; 
if (movie !=null) 

{ 

return View( movie); 

} 

return HttpNotFound( ); 

} 

protected override void Dispose(bool disposing) 

{ 

_db.Dispose( ); 

base. Dispose (disposing); 

} 

} 

} 


So, as you could see above in the 
snippet I have declared one variable for 
my context to instantiate the “MovieDb” . 
And since I already have datacontext 
declared here; hence, I have also 
implemented dispose method to clean 
the things up. Here, I have used Bind 
mechanism to bind parameter. Now, 
what bind is doing here; it tells the MVC 
Model binder that when it goes to look 
for “ Movield ” parameter value, look for 
something called “/</”. Now, the next 
lines are pretty obvious, it will look for 
movie based on the “ Movield ’ passed 
in. If it's not equal to null, we will 
simply return view associated for that 
otherwise, will simply return 404 error. 
But, at this point I already have a view, 



which just needs little bit of 
modification. 


@model MovieReview. Models .Movie 
ViewBag . Title = "Index"; 

I 

<h2>Review for @Model .MovieName</h2> 

<P> 

@Htrrl . ActionLink( "Create New", "Create") 

</p> 

@Html . Partial( "_Reviews", Model . reviews) 

So, if you notice the above snippet, I 
have split the Movie Review index into 
partial view which is going to render me 
a table based on the reviews getting 


passed in from here. Now, I have 
created one partial view with the name 
“ Reviews ” with the following piece of 
code. 


(Smodel I Enumerable<MovieReview . Models . MovieReviews> 

<table> 

<tr> 

<th> 

@Html.DisplayNameFor(model => model . ReviewerName) | 
</th> 

<th> 

@Html.DisplayNameFor(model => model . ReviewerComments) | 

</th> 

<th> 

@Html.DisplayNameFor(model => model . ReviewerRating) 

</th> 

<th></th> 

</tr> 


@foneach (var item in Model) 

{ 


<tr> 


<td> 

@Html . DisplayFor(modelItem => item. ReviewerName) 

</td> 

<td> 

@Html . DisplayFor(modelItem => item. ReviewerComments) 
</td> 

<td> 

@Html.DisplayFor(modelItem => item. ReviewerRating) 

</td> 

<td> 

@Html. ActionLink("Edit", "Edit", new { id = item. Id }) 


</td> 

</tr> 


</table> 


Now, let's go ahead save everything, 
build the application and then try this 
thing out. 


Server Error in '/' Application. 

The model item passed into the dictionary is of type 'MovieReview. Models. Movie', but this dictionary requires a model item of type 
'System. Collections. Generic.IEnumerabie’ l[MovieReview. Models. Movie]'. 


Now, the problem over here is 
associated with the Entity Framework 
because here reviews property by 
default will be null. So, when you try to 
do “Movies. Find(id)” in the controller, 
it will simply return the Movie Entities 
properties, it won't touch “ Reviews ” 
because this particular information is in 
different table. Hence, here there is One 
to Many Relationship is associated 
between “Movie” and its “ Reviews ” and 
EF couldn't load these child collections 
automatically. 

So, in order to fix this problem, I'll just 
go ahead and add “ Virtual r keyword in 
movie class before the collection, which 
will tell EF to extract the “ Reviews ” 



associated for that “Movie” also. So 
behind the scenes there will be two “ db 
queries ”, one to load the movie and 
another one to load the Reviews. 
However, this solution won't be the best 
way to solve the problems in many big 
enterprise projects. But, in that case we 
could make use of LINQ concept 
“Eagerly Loading” which will not only 
load the Movies information but also 
reviews associated with this in one shot. 

You can refer the same on MSDN LINQ 
article. But, for now let's assume that by 
placing virtual in front of reviews will 
solve the problem for me. So, my 
modified Movie class looks like 



using System; 

using System. Collections .Generic; 
using System. Linq; 
using System. Web; 

namespace MovieReview. Models 

{ 

public class Movie 

{ 

public int Id { get; set; } 
public string MovieName { get; set; } 
public string DirectorName { get; set; } 
public string ReleaseYear { get; set; } 

public virtual ICollection<MovieReviews> reviews { get; set; } 

> 

> 

Now, with the above piece of code in 
place, let's go ahead build the solution 
and refresh the page, it will now give me 
the desired result. 



Select One Horn? About Contact Movies o Login 


Review for Godzilla 


■tome IRcvicwcrCommcnts [RcvicwcrRating 

ay Excellent 5 Edit 


Create Nev 




Create and Edit Facility of 
Review: - 

Now, let's turn our attention towards 
creating review. Now, when I click on 
the link Create New, it will give me the 
below error which is obvious. 


t- G localhost: 

Server Error in '/' Application. 


The resource cannot be found. 


Now, let's fix this. So, in order to fix the 
same I need to modify my index page 
code. As you can see in the below 
modified view I have added a parameter 
that will tell the routing engine to please 


pass a parameter called “movie Id” 
assigned with “ Model.Id 


(almodel MovieReview. Models. Movie 


Si 

ViewBag. Title = "Index"; 

I 

<h2>Review for @Model .MovieName</h2> 

<P> _ 

@Htrr.l .ActionLink( "Create New", "Create", new { movieId=Model . Id}) 

</p> 

@Html . Partial ( "_Reviews", Model . reviews) 

<div> 

§Html. Action Link ("Back to List", "Index", "Movies") 

</div> 

Now, what the above piece of code will 
do? It will give us a proper link. Now, 
in the “ MovieReview s” controller, I 
need the action which will respond to 
the “get” request of the “Create”. 


Below, as you can see; this is a very 
simple action method which simply 
returns a view based on the incoming 
“/</”. However, for creating the view we 
obviously won't need this parameter, but 
I keep it for future use. 

[HttpGet] 

public ActionResult Create(int movield) 
{ 

return View(); 

> 

However, I do need to create one view 
for the same. So, I just right-click on the 
index method and Add a view with the 
below mentioned parameters. 



Add View 

View name: 

Create 
View engine: 

Razor (CSHTML) »| 

m Create a strongly-typed view 
Model class: 

MovieReviews (MovieReview.Models) 

Scaffold template: 

| Create ▼ [V] Reference script libraries 

Create as a partial view 
0 Use a layout or master page: 


Now, when I go ahead and click on Add 
it will generate me the desired view. 
But, let me fix the UI of this View. So, 
ideally this view will look like 



(Leave empty if it is set in a Razor _viewstart file) 


MainContent 


Add | | Cancel 



@model Movie Review. Models .MovieReviews 


ViewBag. Title = "Create"; 

i 

<h2>Create</h2> 

fusing (Html . BeginForm( ) ) { 

(SIHtml . AntiForgeryToken( ) 

@Html . ValidationSummary(true) 
<form class="form-horizontal"> 

<f ieldset> 

< legend >MovieReviews< / legend > 


<div class="form-group"> 

@Html . LabelFor(model = > model . ReviewerName) 

<div class="form-control"> 

@Html . EditorFor(model => model . ReviewerName) 

@Html . ValidationMessageFor(model => model. ReviewerName) 
</div> 

</div> 

<div class="form-group"> 

@Html . LabelFor(model => model . ReviewerComments) 

<div class="form-control"> 

@Html . EditorFor(model => model . ReviewerComments) 

@Html . ValidationMessageFor (model => model . ReviewerComments) 
</div> 

</div> 

<div class="form-group"> 

@Html . LabelFor( model => model . ReviewerRating) 

<div class="form-control"> 

@Html . EditorFor(model => model . ReviewerRating) 

@Html . ValidationMessageFor (model => model . ReviewerRating) 
</div> 

</div> 


<P> 

<input class="btn-primary" type="submit" value="Create" /> 

</p> 

</fieldset > 

</form> 

> 

<div> 

§Html.ActionLink("Back to List", "Index", "Movies") 

</div> 


^section Scripts { 

§Scripts . Render ( "~/bundles/jqueryval" ) 


So, as you can see in the above piece of 
code that it is using HTML helper 
“ BeginForm ” which will postback to 
the same form when user click on the 
save button. Now, when I build and 
refresh the page, I should be getting my 
desired page at the same place. 



Now, in here I need one more action to 
respond to our Create action call. And 



this action method will look like this. 


[HttpPost] 

public ActionResult Create(MovieReviews _review) 

{ 

if (ModelState. IsValid) 

{ 

_db . MovieReviews . Add (_review ) ; 

_db . SaveChanges ( ) ; 

return RedirectToAction( "Index", new { id = _review.MovieId }); 

> 

return View(_review); 

> 

So, what will happen here, this method 
will respond to the “Post” request which 
will take “ MovieReviews ” as a 
parameter and then Model Binder from 
the MVC will come into play and 
instantiate an instance of this type and 
then look all the places to find the 
properties associated with that and then 
it will push these values into it. Now 
inside the Create action it will first 


check whether the “ ModelState ” flag is 
valid or not. If this flag returns false, 
then it means something went wrong 
while saving the same. We'll go through 
these validation rules in the next section, 
but for now just understand that if due to 
any reason validation fails then it will 
simply return the same view forcing the 
user to fix the same and then save the 
changes. 

On the other hand, if everything is valid, 
then in that case, “ ModelState ” flag will 
be true and then it will add the new 
review to the database, save the same 
and then redirect to the reviews page, so 
that I can see them., Now everything is 
in place, let's go ahead build the 



application and then try again. 



So, as we can see in the above screen 
shot after saving the same it get 
redirected to the Reviews page for the 
particular movie. Now, let's go ahead 





and verify the same from the database. 


dbo.MovieReviews [Data] 

W > | Max Rows: ] 1000 

Id ReviewerName 

Rahul Sahay 



3 

NULL 


Nivedita 

NULL 


Excellent 

Awesome 

NULL 


ReviewerRating Movield 
5 1 

5 1 

NULL NULL 


Let's go ahead and implement the edit 
part as well. But, before that let's see the 
Home page once, now here number of 
reviews should have been updated. 






Now, let's talk about editing the review. 
So, here also for implementing the Edit 
action the course of action will remain 
same, 1 st we need an action method 
which will respond to the “get” request 
of “Edit” method. So, my edit action 
method will look like 

[HttpGet] 

public ActionResult Edit(int id) 

{ 

var model = _db . MovieReviews . Find (id) ; 
return View(model); 

> 

So, let me explain for a second that what 
the above piece of code is doing. Here, 
it is taking id as input parameter and 
looking for review based on the 
incoming parameter. So, it will return 


the user that particular review which 
will allow the user to edit that. Now, to 
respond to this “get” request, I need a 
view. But it seems like I already have a 
view in there, just modify the same. But, 
it would be good idea to create a fresh 
template, so delete the existing View and 
add one. 



Edit 

View engine: 


Razor (CSHTML) 


] Create a strongly- typed view 
Model class: 




SEE 


Scaffold template: 


(Edit 


[V] Reference script libraries 


[ ] Create as a partial view 
[y] Use a layout or master page: 


□ 


(Leave empty if it is set in a Razor _viewstart file) 

ContentPlaceHolder ID: 

[MainContent 


So, in the above screen shot as you can 
see that, I have selected 
‘ L M o vie Re views” as an Edit scaffolding 
template, so it will emit me the template 



with Edit functionality. So, the modified 
view would look like something shown 
below. 

@model Movie Review. Models .Movie Reviews 
ViewBag. Title = "Edit"; 

> 

<h2>Edit</h2> 

fusing (Html . BeginForm( ) ) { 

@Html . AntiForgeryToken( ) 

@Html . ValidationSummary(true) 

<form class="form-horizontal"> 


<fieldset> 

< legend >MovieReviews< /legend > 

<div class="form-gnoup"> 

gHtml .HiddenFor(model => model. Id) 

@Html . LabelFor(model => model . ReviewerName) 

<div class="form-control"> 

@Html . EditorFor (model => model. ReviewerName) 
@Html.ValidationMessageFor(model => model. ReviewerName) 
</div> 

</div> 

<div class="form-group"> 

§Html . LabelFor(model => model . ReviewerComments) 

<div class="form-control"> 

@Html . EditorFor(model => model . ReviewerComments) 

@Html .ValidationMessageFor (model => model. ReviewerComments) 
</div> 

</div> 

<div class="form-group H > 

@Html . LabelFor(model => model . ReviewerRating) 

<div class="form-control"> 

@Html . EditorFor(model => model . ReviewerRating) 
@Html.ValidationMessageFor(model => model . ReviewerRating) 
</div> 

</div> 

@Html . HiddenFor ( model=>model . Movield ) 

<P> 

<br /> 

<input class="btn-primary" type="submit" value="Save" /> 

</p> 

</fieldset> 

</form> 

> 


<div> 

@Html.ActionLink("Back to List", "Index", new { id=Model .Movield}) 
</div> 


^section Scripts { 

^Scripts . Render ( "~/bundles/ jqueryval" ) 

i 


So, when you see the above piece of 
code you will see that I have used one 
HTML helper “ HiddenFor ”, this is just 
to ensure that we are carrying the id 
value associated with that “movie” and 
“ movieReview ” for editing the review. 
But, since it's a key, it doesn't require 
user to change that, hence it's masked. 
So, now when we click on the edit link 
for any review as shown below, it will 
emit me the required view in the edit 
pattern. 



Select One Home About contact Movies •> Login 


Review for Godzilla 

Create New 

RcvicwcrName |RcvicwcrCommcnts IRcviewcrRating 
Rahul Sahay Excellent 5 Edit 



Select One 


Edit 

MovieReviews 



So, as you can see in the above screen 
shot based on the id which we passed 
from the action method, it fetched me the 
view in edit pattern. Now, when I hit 
save, I do need an action method which 
will respond to this request. So, this 
action method is obviously going to be 
the “Post” request. And this will look 
like as shown below. 



[HttpPost] 

public ActionResult Edit( [Bind(Exclude="ReviewerName" ) ]RovieReviews review) 
{ 

if (ModelState.IsValid) 

{ 

_db. Entry (review) .State = EntityState. Modified; 


_db . SaveChanges ( ) ; 

return RedirectToAction( "Index", new { id = review. Movield }); 

} 

return View(); 

> 

So, here it is again going to take 
‘ L Mo vie Re views”, again the MVC Model 
binder is going to populate the object 
with the things it finds in the request. So, 
here we don't have to look for posted 
form values or query strings, the model 
binder will take care for this. Here, 
again the check for 

“ModelState.IsValid”, simply return the 
same view in case model state is not 
valid. But, if it is valid, then our 


approach here will be little different. 


Property “ EntityState ” will be 
available in the “ System. Data''’ 
namespace. Here, the “Entry” is way to 
tell the EF, that here is a review that I 
want to modify. So, if there is a value 
change in it, then EF will go ahead and 
update the record in the database. Here 
what we did is we attach an existing 
review with that entry; set the state to 
“ Modified 1 ’ and then EF will update the 
record. Again, on successful, change 
we'll redirect the user back to index 
action. So, let's go ahead and build the 
app and see whether it's taking effect or 
not. 



II.1PTE1 Irffi a mm 111 ' riY J 


.Select One Home About Contact 


Review for Godzilla 


Down, in the below screenshot, I have 
changed the rating to 4. 



Now, let me go ahead and click on save 
and check whether the same is working 





fine or not. 



° Register 

Select One Home About Contact Monies o Login 


Review for Godzilla 

ReviewerName |ReviewerComments |Reviewer Rating 
Rahul Sahay Excellent S Edit 

Back to List 


And it did work. Now, if you have 
noticed the above code review that I did 
include 

“([Bind(Exclude="ReviewerName")]” 

in my method. The only reason behind 
this I don't want user to edit the reviewer 
name. There are number of ways to fix 
this issue, but this approach is the 
quickest and easiest way to fix the same. 
However, you might be thinking if you 
delete the “ ReviewerName ” name 



portion from the view, user cannot edit 
the same as he/she can't see it, 

But obviously user may simply issue a 
get request from the browser and update 
the record. But, this “ Exclude ” will act 
as a blacklist, so any value is getting 
passed on to this property will be not 
considered. So, you need to use the same 
in conjunction with View changes. Then 
from View you need to delete the 
‘ Reviewer Nam e' ’ so that no one can 
even attempt that. But, for now I don't 
need that hence, I am removing this Bind 
part from the method and build again. 


Validation Annotations:- 


Now, the next thing which I want to 
discuss here is different kind of 
validations associated with MVC. Now, 

I would like to restrict a user to enter 
only valid rating. Currently, user can add 
any rating which user wants. But, with 
the implementation of Range, user will 
be restricted. 

public class MovieReviews 

{ 

public int Id { get; set; } 

public string ReviewerName { get; set; } 

[Required] 

[StringLength(200) ] 

public string ReviewerComments { get; set; } 
[Range(l,5>] 

public int ReviewerRating { get; set; } 
public int Movield { get; set; } 

} 


So, here as you can see I have added the 
annotation in the “ MovieReviews ” class. 
And this annotation will be available 
under the namespace 
“ System . ComponentM odel.DataAnnoti 
So, we need to include this first. Now, 
when we do model binding to these 
attributes, Model Binder will also check 
any validation logic applied to these 
attributes, if yes then it will implement 
the same against the value which you 
enter there. 

There's also a “Required” property 
which will tell user that it is mandatory 
field. You might have wondered that why 
I have not used “Required” for rating, 
because rating is an integer property and 



which is value type, and value type can't 
be null, hence annotating rating with 
“Required” is a kind of redundant thing 
here. 

I have also restricted max value for the 
comment by using “ StringLength ” 
property simply. Apart from these basic 
validations, there are many more 
attributes which you can refer like for 
validating Regular Expression, 

Remote Validation and many more. You 
can read these attributes in detail on 
“ MSDJS ” Site itself. So, for now I am 
just focusing on the basic validations. 
Now, when we build the same try to 
enter something out of range, then it will 
behave as shown below. 



So, now when I click on the “Edit” link 
for Nivedita, it banged and produced the 
below error. 


*■ C 1: local hostl033/MovieReviews/Edil/i 

ft 

Server Error in '/' Application. 


The model backing the 'MovieDb' context has changed since the database w 
database (http://go.microsoft.com/fwlink/7LinkIdB23S269). 

as created. Consider using Code First Migrations to update the 

c „„ p , ... ... .. 





tews.FIndUa); 


So, the reason for this failure is EF. EF 
is always checking the model against the 
model currently in use whether they are 
in sync which you have created at the 



time of migrations. So, here EF detected 
that model has changed like “ Required 1 ’ 
field which is going to tell the schema 
that I do need “ NOT NULL ” column. 

So, the model needs to be updated. 
Similarly, I have also restricted the size 
for string length; previously it was 
“ NVARCHAR MAX’. So, in order to fix 
the same what I could do here, is just 
update the database from the powershell 
command “Update-Database -Verbose - 
Force” and then it will update the 
database with the new model. 




Package source: | nuget.org -| 0 Default projea: | MovieReview 

Specify the '-Verbose' flag to view the SQL statements being applied to the target database. 



So, up here is the co nfi rmation that 
model is updated correctly. Now when I 
refresh the page, it will take me to the 
required page as shown below. 



Now, when I go ahead and try something 
out of range, then it will give me the 
below error. 



So, as soon as I typed 10, it picked the 
wrong value and gave me an indication 
that value you entered is out of range. 
So, here “ EditorFor ” HTML helper 
comes into action, it emits the data into 
the input tag which client side 
JavaScript picked up and exercised the 
client side validation for you. 




In the above screen shot same thing 
happened with the Comments field. So, 
even if user tries to click the save button, 
nothing will happen. Now, one point to 
note here that the same validation will 
take place at the server side as well. 
Suppose for any reason, user has 
disabled the “ Javascript ” in the 
browser, in that case model binder will 
do the same validation at the server side 




and return the same view to the user to 
fix it. 

Obviously, we could go ahead and write 
some custom validations if required in 
the project. Basically, we keep custom 
logic in the same model class which we 
are validating. 


Summary:- 

So, in this chapter we have added the 
CRUD operation. We have also seen 
Model Binding in action. We have 
covered EF Migrations which help us to 
test the app from sample data and also 
helps in keeping the model classes in 


sync with database. We have also seen 
how to use different Scaffolding 
templates while generating codebase for 
CRUD operation. In the end, we have 
covered client side validation using 
Data Annotations. 



Chapter 6: 
JavaScript and 


AJAX in MVC 


WHAT DO you find in 
this CHAPTER? 


=> Introduction 


=> Managing Scripts 
=> Ajax Helpers 
=> Async Search 
=> Paging 
=> Summary 


Introduction:- 

Hi friends, in this section we'll look at 
adding client side features in the MVC 
application. So, in this entire chapter our 
main concern would be on adding AJAX 
features in MVC application. So, during 
the course we'll look at the Ajax helpers 



offered by MVC. We'll also use Jquery 
and Jquery features to go to the various 
sections of the page and modify the 
same. In this section we'll stress upon 
how client validation works also how 
bundling and nullification can be done. 
We'll also see how to produce and 
utilize JSON in the application. 


Managing Scripts:- 

In this case we'll first see that how 
Visual Studio organized the client side 
scripts. So, as you can see in the screen 
shot below that there is one scripts 
folder created by visual studio where in 
all the application related scripts reside. 


a Wl Scripts 

£7 _references.js 
£T bootstrap.js 
£7 bootstrap. min.js 
£7 jquery-2.1.0.intellisense.js 
U jquery-2.1.0.js 
n jquery-2.1.0. min.js 
Q jquery-2.1.0. min. map 
£7 jquery-ui-1.8.24.js 
£7 jquery-ui-1.8.24. min.js 
£7 jquery.unobtrusive-ajax.js 
£7 jquery.unobtrusive-ajax.min.js 
£J jquery.validate-vsdoc.js 
£7 jquery.validate.js 
£7 jquery.validate. min.js 
£7 jquery.validate.unobtrusive.js 
£7 jquery.validate.unobtrusive.min.js 
£T knockout-2.2.0. debug.js 
£7 knockout-2.2.0.js 
£7 modernizr-2.6.2.js 


It would be good idea to get started with 
client side development, by first 


understanding what different kind of 
scripts provided by Microsoft by 
default. We'll start with the 1 st one 
“ reference.js ”. This file usually gives 
Visual Studio a list of files which you 
commonly use so that you can get 
intellisense support while writing the 
javascript code. So, if we open the file 
and see that, it contains references of all 
those files which are required basically 
while writing the script. 

/// <reference path=" jquery-2.1.0. js" /> 

III <reference path=" jquery-ui-1 . 8 . 24. js" /> 

III <reference path=" jquery . validate. js" /> 

III <reference path=" jquery. validate. unobtrusive. js" /> 
III <reference path="knockout-2. 2.0. debug. js" /> 

III <reference path="modernizr-2.6.2. js" /> 

So, we can see the list of different files 
which we usually use while writing our 


client side code. If there is any other 
third party script you are using in your 
application, you could obviously go 
ahead and add the reference for the same 
in the file. After references, I have one 
third party JS that is “ bootstrap js” 
which I have included to support the 
modified UI. After that there are 
different JQuery files. The one ending 
with intellisense is again to help you 
while writing the scripts. This file is 
responsible for providing much better 
intellisense support. The file “ jquery - 
2.1.0 ” is the Core JQuery library file 
which we'll be using extensively for our 
client side coding. JQuery file ending 
with . min is a minified version of the 
JQuery core library file. Minification is 



the process where in we are making the 
JavaScript file as small as possible by 
removing couple of redundant things like 
unneeded white space, unneeded 
comments, also by shortening the long 
function names. 

But, when you open this file, you find 
that this file is not readable. Rather, this 
file is much smaller than the core 
version, means browser will take very 
less time to download the file when it is 
sent to the browser. So, these files we 
basically use in the production to boost 
the performance. Here, in this scripts 
folder, we also have “ Jquery-UT ’ 
version of files which is meant for 
JQuery widgets like “ accordions , 



panels etc ” which you can use in your 
application. We also have 
“Jquery. Validate ”, another plugin for 
Jquery meant for client side validations. 
So, the client side validations which we 
have discussed in the last chapter 
actually rely on this library. 

We also have “ Knockout ” JS library 
which is meant for “MVVM (Model- 
View- Vi ew Model)” pattern. It provides 
features like two way data binding. Then 
we have script known as “ Modernizer ” 
which is a library basically to detect and 
enable HTML5 features on the browser. 
Other files which are equally important 
are “ Unobtrusive ” JS files. So, 
basically these files serve as a bridge 



between ASP.Net MVC and Jquery. Like 
in client side validation in MVC you 
need both Jquery Validation Library, 

“ Jquery and 

Jquery. Validate. Unobtrusive ” script 
file as it takes metadata that's emitted by 
HTML Helper like “ EditorFor ” and 
passes that data to the Jquery validation 
such that it can be applied on the 
validation rules of the client. Libraries 
like Jquery and modernizer are typically 
required everywhere in the application, 
so it means it has to be included in the 
Layout Page . 

< ! DOCTYPE html> 
chtml lang="en"> 

<head> 

<meta charset="utf-8" /> 

<title>§ViewBag. Title - My ASP.NET MVC Application</title> 

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
<meta name="viewport" content="width=device-width" /> 


<link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 

< script src="~/Scripts/ j query- 2 . 1.0. min . js" >< /script > 

<script src="~/Scripts/bootstrap.js"X/script> 

<link href ="~/Content/BootStrap-theme-movie. css" rel="stylesheet" /> 
gf@Styles . Render( "~/Content/css" 

^Scripts . Render ( "~/bundles/modernizr " ) 

</head> 

<div class="container"> 

<div class="row"> 

<div class="navbar navbar-default"> 

<div class="navbar-header"> 

<ul class="nav navbar-nav"> 

<li><span class="navbar-brand">Select One</span></li> 

</ul> 

</div> 

<div class="navbar-collapse navbar"> 

<ul class="nav navbar-nav"> 

<li>§Html.ActionLink("Home", "Index", "Home")</li> 
<li>(|Html.ActionLink("About", "About", "Home”)</li> 
<li>$Html .ActionLink("Contact", "Contact", "Home")</li> 
<li>(BHtml .ActionLink( "Movies", "Index", "Movies")</li> 
<li>§Html . Partial( "_LoginPartial" )</li> 

</ul> 

</div> 

@RenderSection( "featured", required: false) 

</div> 

</div> 

<div> 

(|RenderBody( ) 

</div> 

<footer> 

@*<div class="panel-footer"> 

Best Review 

@Html . Action ( " bestReviews " , "MovieReviews " ) 

</div>^ 

</footer> 

</div> 

^Scripts . Render ( "~/bundles/ jquery " ) 

§RenderSection( "scripts", required: false) 


</html> 


So, as you can see at the top of the layout 
page, there is a call with 
“ Scripts.Render ” which invokes 
modernizer. So, what this 
“ Scripts.Render ” will do here, it will 
put a script tag referencing Modernizer 
JS file at the top of the markup inside the 
head tag. It is important to include 
Modernizer at the top of the page, 
because it starts executing before the rest 
of the HTML starts getting parsed. 

Modernizer ensures that older browser 
like IE6 are good to work with HTML 5 
elements like “wav” and “ section ” 
which you can see in the layout page. 


However, other libraries are not 
required to be included at the top of the 
page; instead the same can be included 
at the bottom of the page as you can see 
above in the code snippet. 

So, in this another call of the 
“Scripts.Render ” , it involves JQuery. It 
is always a good idea to include scripts 
at the bottom of the page, as it makes the 
page load faster. Now, let's understand 
the meaning o f ‘ Scripts. Render' ’ or 
“ Styles.Render ”. They both rely on the 
new features of ASP.Net which bundles 
and minify files for you. 

“ Scripts.Render ” will give you minified 
Javascript bundle however, 

“ Styles.Render ” will give you minified 



bundle of StyleSheet. Now, another 
question which arises here, what's a 
bundle. Now, a bundle is yet another 
technique to boost the performance of a 
webpage by combining files together. 
So, browser doesn't need to download 
individual files, rather it will just 
download one file. But, during 
development time it is preferred to use 
the individual files, as you can see them 
and understand the code as it would be 
in readable format. Now, to understand 
how these bundles get initialized, let's 
open “ Global.asax ” file. 



public class MvcApplication : System. Web. HttpApplicat ion 

{ 

protected void Application_Start ( ) 

{ 

AreaRegistration . RegisterAllAreas( ) ; 

WebApiConf ig . Register(GlobalConf iguration . Configuration ) ; 

FilterConfig. RegisterGlobalFilters (Globa IF ilters. Filters) ; 

RouteConf ig . RegisterRoutes( RouteTable . Routes ) ; 

BundleConf ig. RegisterBundles(BundleTable .Bundles) ; 

AuthConf ig . RegisterAuth ( ) ; 

} 

> 

In here, we can see that there is a call to 
“ BundleConfig ” to register the bundle. 
Now, when you press F12 on the 
ii BundleConJig , \ it will take you to its 
definition which sits in the “ AppStart ” 
folder. Below is the simple class 
definition of “BundleConfig” where we 
can see that it's adding various scripts 
under scripts bundle and styles under 
styles bundle. We could obviously go 


ahead and add as many scripts as we 
want in the existing bundles or create 
new custom bundles as well. 

using System. Web; 

using System. Web. Optimization; 


namespace MovieReview 

{ 

public class BundleConfig 

{ 

// For more information on Bundling, visit 

http : / /go . microsoft . com/ fwlink/ ? Linkld=254725 

public static void RegisterBundles(BundleCollection bundles) 

{ 

bundles .Add(new ScriptBundle("~/bundles/jquery") .Include( 

"~/Scripts/ jquery-{version} . js" ) ) ; 

bundles. Add(new ScriptBundle( ""-/bundles/ jqueryui") .Include( 

""•/Scripts/ jquery-ui-{version}. js") ); 

bundles .Add (new ScriptBundle("~/bundles/jqueryval") . Include ( 

""-/Scripts/ jquery .unobtrusive*", 

""•/Scripts/ jquery . validate* " ) ) j 

// Use the development version of Modernizr to develop with and learn 
from. Then, when you're 

// ready for production, use the build tool at http://modernizr.com to 
pick only the tests you need . 

bundles .Add (new ScriptBundle( ""-/bundles/ modernizr") .Include( 
"~-/Scripts/modernizr-*" ) ); 

bundles. Add( new 

StyleBundle( ""-/Content/ css" ) . Include( ""-/Content/ site . css" ) ) ; 

bundles .Add( new StyleBundle("~/Content/themes/base/css") .Include( 
""■/Content /themes/ base/ jquery . ui . core . css" , 
"~/Content/themes/base/ j query . ui . resizable . css " , 
"~/Content/themes/base/ j query . ui . selectable . css " , 
"~/Content/themes/base/ jquery . ui . accordion . css" , 
"~/Content/themes/base/ jquery . ui . autocomplete . css" , 
""-/Content /themes/ base/ jquery . ui . button .css", 

""-/Content /themes /base/ jquery .ui. dialog, css", 

""■/Content /themes/base/ jquery . ui . slider .css", 
"~/Content/themes/base/jquery.ui.tabs.css", 
"~-/Content/themes/base/ jquery . ui . datepicker . css", 
"~/Content/t hemes/base/ jquery .ui . progressbar .css", 
""■/Content /themes/ base/ jquery .ui.t heme, css") ); 

> 

> 

> 


So, as you can see in the snippet, 1 st we 
are reaching the bundle by giving the 
virtual path then the “file/files” which 
you want to include in the bundle are 
listed with the call “Include”. If you 
want to include multiple files under the 
same bundle, then files can be separated 
by operator. We can also use wild 
cards here, so like if you need to include 
multiple files starting with specific 
patterns, you could obviously specify the 
same like 

“ ”~/Scripts/j query, validate * So, 

here is specifying the wild card. So, 
all the files starting with 
“j query. validate” and ending with 
anything will get included in the bundle. 


Now, once we specified the bundles, we 
can make a call to them by either using 
‘ 'Scripts. Render" ’ or ‘ L Styles. Render' ’ . 
These methods will behave differently 
depending upon your application 
configuration. Now, here it means how 
many files have been included in that 
bundle in the bundle. config, those many 
files will be bundled and produced at 
the client side. Let me explain the same 
by giving a small demo on that. On the 
Layout View just include this line 
“@Styles.Render("~/Content/themes/bas 
So, this will include all the above listed 
files. Now save the file and refresh the 
page, now rt-click on the page and do 
view source, you will see 12 additional 
files have been included. 


C 0 view-source:localhostl033/Movies 


: <hcml lang="en"> 

5 CCiCle>Index - My ASP.NET MVC Applicacion</cicle> 

5 1 <lin!c href=" /faglcon.ico " rel="shorccuc icon" type“"image/x-icon" 

; clink href=" /Ccr.cer.c/bcotscrac .rr.ir. ■ C33 " rel="scyle3heec" /> 

» cscripc 3rc-"/Scripc3/iouerv-2.1.0.iKin.i3"x/3criPC> 

3 cscripc 3rc=" /ScripC3/booC3Crap.1s ">C/scripc> 

Clink href=" /Cor.cer.c/3oocScrac-c'r.eme-ir,ovle.c33 " rel="scylesheec" 


13 Clink href*" /Corcenc / cherres/baseX-i query ■ uu ■ core ■ C33 " rel="scylesheec"/> 

h clink href*" /Cor.cer.c/ cheir.es/bese/ 1 query .m ■ resizable. C33 " rel-"scylesheec"/> 

« clink href*"/Conccnc/chege3/ba3e/~i query .ul. scleccable . C33" rel-"scylesheec"/> 

18 Clink href=" /Ccr.cer.c/cheir.es /base/' query ,ui ■ accordion ■ C33 " rel= n scylesheec"/> 
it clink href*" /Cor.cenc/ cheir.es/base/ 1 query .ui ■ aucocoir.p2.ece. css " rel-"scylesheet"/> 

is ■ Clink href=" /Cor.cer.c/cheir.e3/ba3e/1 query .ui .diaico ■ css " rel=”scylesheec"/> 

20 Clink href*"/Cop-cqnc/ ^heqiqa/base/ gugr y , p j. , slidqr ,033" rel-"scylesheec”/> 

:i Clink href*" /Concer.c/ cheir.es/base/iquery .ui ■ cabs ■ C33" rel="scyle3heec"/> 

22 j clink href*" / Cor.ter.c/chetr.es/base/l query ■ ui ■ daceclcker .C33 " rel="scylesheec"/> 

23 clink href-"/Concenc/ chemes/base/ j query ■ ui ■ pr oqrqssbar ■ css " rel-"scylesheec"/> 
:< Clink href*" / Concer.c/ cheir.es/ be se/i query ,ui ■ cheir.e . C33 " rel="scylesheec”/> 


cscripc src="/Scripcs/niodernizr-2 .6,2. j s"x/scripC> 


But, this is the exactly opposite behavior 
of bundling and minification. Bundling 
means combine all the scripts or styles 
in one file and produce the same at the 
client. To explain this scenario, since we 
are in debug mode, hence Visual Studio 
emitted all the files in original mode. 
Now, if I go ahead and change the debug 
settings from the web.config file to 


Compilation debug^'Talse" 
targetFramework="4.5" /> 

Then, if I refresh the page and see the 
source of the file, it will produce the 
below result. 



Now, when you try opening the link, in 
the browser then it will produce one file 
in the minified version. So, basically 
this file comprise of all the files in one 
bundle in minified version. 



Now, let me go ahead undo the changes 
what I have done in Layout view, 
because I don't need that. 


Aj ax helpers:- 

Now since we have seen that how to 
manage the scripts and use the same in 
our application, it's time to change the 
gear and switch to learn how Ajax 
helpers can be used. We'll start 


implementing the same from the home 
page itself. Now, let's do one quick 
change here, instead of using limited no 
of movies, just use 100 dummy movies, 
so that we can have some rich dataset to 
search for in the database. And the 
easiest way to achieve the same is seed 
the database with 100 odd movies. So, 
I'll go to the configurations file in the 
Migrations folder and change the script a 
bit. Now, it will look like as shown 
below:- 



protected override void Seed(MovieReview. Models. MovieDb context) 

{ 

// This method will be called after migrating to the latest version. 

context. Movies. AddOrUpdate(r => r. MovieName, 

new Movie { MovieName = "Avatar", DirectorName = "lames Cameron", 
ReleaseYear = "2009" }, 

new Movie { MovieName = "Titanic", DirectorName = "lames Cameron", 
ReleaseYear = "1997" }, 

new Movie { MovieName = "Die Another Day", DirectorName = "Lee 
Tamahori", ReleaseYear = "2002" }, 

new Movie 

{ 

MovieName = "Godzilla", 

DirectorName = "Gareth Edwards", 

ReleaseYear = "2014", 
reviews = new List<MovieReviews>{ 
new 

MovieReviews{ReviewerRating=5,ReviewerComments="Excellent",ReviewerName=" Rahul 
Sahay"} 

} 

}); 

for (int i = 0; i < 100; i++) 

{ 

context. Movies. AddOrUpdate(m => m. MovieName, 

new Movie { MovieName = "Anony_Movie_" + i .ToString( ), 
DirectorName = "Anony_Director_" + i.ToString(), ReleaseYear = "2014" }); 

> 

> 

So, as you can see in the above snippet, I 
have added one loop to add 100 odd 
movies in the database with anonymous 
movie name and director name. Now, 
with the above piece of code in place I 


should be able to update the database, 
and for that I'll open my package 
manager console and run the update 
command (Update-Database) as shown 
below. 









Specify the •-Verbose' flag to vie* 



SQL 




Now, as you can see in the above screen 
shot that seed method is completed 
successfully Now, in order to see these 
new records on the home page, I also 
need to modify my LINQ query in the 
home controller. Initially it is designed 
to take 3 records. Now, I have modified 
the same to take 1 0 records as shown 


below, 


public ActionResult Index( string SearchQuery = null) 

{ 


var model = _movieDb .Movies 

.OrderByDescending(m => m. reviews. Count()) 

.Where(m => SearchQuery == null 

m . MovieName . St artsWit h (SearchQuery ) ) 

.Take(l0) 

.Select(m => new MovieViewModel 

{ 

Id = m.Id, 

MovieName = m. MovieName, 

DirectorName = m.DirectorName, 

ReleaseYear = m. ReleaseYear, 

NoOf Reviews = m. reviews. Count () 

»; 

return View(model); 

} 

Now, with the above code in place I 
could go ahead build the app and refresh 
the home page, I should be able to see 
the newly inserted records in the 
database. 


Select One 



Name - Titanic 



Name - Avatar 



Name - Anony Movie 6 










Likewise my database has been updated 
and same is getting reflected over here 
in the screen shot. Now, going ahead 
let's try searching for movie 
“ Anony_Movie_6 ” as shown below in 
the screenshot. 





Name - Anony Movie_69 


Di rector - Anony.OI rector_6 9 


Name Anony_Movie_68 



Now, when I search the same it will 
produce me the above results. But, 
during that course it's redrawing the 
complete page, also losing the scroll 
position. Now, in order to fix the same I 
need to do the couple of things. 1 st I need 
to create one new bundle which will be 
custom to my movie. So, in order to do 
that what I'll do, I'll go ahead and paste 
the below line of code in bundlesConfig 
file in the App Start folder. 




bundles .Add (new ScriptBundle("~/bundles/movies" ) . Include( 
"~/Scripts/ jquery- {vers ion} . js", 
"~/Scripts/ j query- ui-{ vers ion} . js", 
"~/Scripts/ jquery . unobtrusive*" j 
"^/Scripts/ jquery .validate*")); 


Now, as you can see in the above 
snippet I have taken all the dependent 
script under one “ movies ” bundle. Now, 

I need to search in the solution for 
“ @section Scripts f\ it will list me 
nine instances. Everywhere I need to 
remove 

“ @Scripts.Render("~/bundles/jqueryva 
and save the file. Then, I need to go to 
the Layout view and at the bottom of the 
page instead of loading 
“@Scripts.Render( ,, ~/bundles/jquery") 
we need to render 

“@Scripts. Ren der(' r ~/b undles/m ovies n 


2 nd thing I need to replace the index 
view snippet with the below snippet as 
shown below. 


(almodel IEnumerable<MovieReview. Models. MovieViewModel> 

■ 

ViewBag. Title = "Home Page"; 

1 

|§£<div> 

<form method="get"> 

<input type="search" class=”form-control has-success" name="SearchQuery"> 
<br /> 


<input type="submit" class="btn-primary" value="Seanch by Movie Name" /> 
</form> 

</div>$@ 

fusing (Ajax.BeginForm( 
new AjaxOptions 
< 

HttpMethod = "get", 

InsertionMode = InsertionMode. Replace, 

UpdateTargetld = "movieDiv" 

») 

<input type="search" class="form-control has-success" name="SearchQuery"> 

<br /> 

<input type="submit" class="btn-primary" value="Search by Movie Name" /> 

} 

(BHtml . Partial( "_movies" , Model) 


Now, in the above snippet as you can 


see that I have used ‘ Ajax. Begin Form ’ ’ , 
now Ajax.BeginForm is very similar to 
“ Html.BeginForm It writes a Form 
tag where in you can specify that what 
controllers and what route values need 
to be used. But, the major difference 
here is that it makes an asynchronous 
request to the server which draws only 
portion of the screen. 

On the other hand, 

“ HTML.BeginForm ” makes a 
synchronous request to the server which 
redraws the entire screen. So, all we 
need to tell the helper that which portion 
of the page needs to be updated. And we 
can do this by the Ajax options object 
which we passed in. 



So, what I have done here, I told the 
helper to make a “get” request to the 
server and whatever comes back should 
be replaced by the content in the page 
which is identified as “movieDiv”. Also 
since I need to display the Movie List in 
two ways, one is the default way when 
the page is loaded and another one is 
when the movie is searched. So, it 
means we are going to need this list at 
multiple places. Hence, I just take out 
this div and create one partial view for 
that as shown below in the home folder. 



View name: 


jnovies 
View engine: 


Razor (CSHTML) 


| Create a strongly-typed view 
Model class: 


□ 

3 

Scaffold template: 

[ Empty 

▼ ] 0 Reference script libraries 


[V] Create as a partial view 

[71 Use a layout or master page: 

i □□ 

(Leave empty if it is set in a Razor _viewstart file) 

ContentPlaceHolder ID: 

[MainContent 

Add | [ Cancel 



@model _Enumerable<MovieReview. Models. HovieViewModel> 


<div id="movieDiv"> 

@foreach (var item in Model) 

{ 

<div> 

<h4>Name - @item.MovieName</h4xbr /> 
<h5>Director - @item.DirectorName</h5> 
<h5>Release Year - (5)item.ReleaseYear</h5> 
<h5>No Of Reviews - @item.No0fReviews</h5> 

<hr /> 

</div> 

> 

</div> 

Now, it's entirely dependent on the 
controller action to decide to load the 
complete page or partial page. So, we 
also need to modify the home controller 
as shown below. 


public ActionResult Index(string SearchQuery = null) 

{ 


var model = _movieDb .Movies 

.OrderByDescending(m => m. reviews .Count( ) ) 
. Where(m=>SearchQuery==null | | 
m.MovieName . StartsWith(SearchQuery) ) 

.Take(10) 

. Select (m => new MovieViewModel 

{ 

Id = m. Id, 

MovieName = m.MovieName, 

DirectorName = m.DirectorName, 
ReleaseYear = m. ReleaseYear, 

NoOf Reviews = m. reviews .Count ( ) 

}); 

if (Request . IsAjaxRequest( ) ) 

{ 

return PartialView( "_movies", model); 

> 

return View(model); 

} 

So, here what the above piece of code is 
checking; if the request arriving is the 
Ajax request or simple request. If it's an 
Ajax request, then it will simply return 
the partial view with the model value 
passed inside otherwise it will simply 


return the plain view. Now, in order to 
prove my point, let's go ahead and put 
break point in the home controller and 
see how it behaves when the page loads 
and when the search is made. 



Above screen shot is the scenario where 
in page is loading, hence 
“Request.IsAjaxRequest()” returned me 
false. Now, let's go ahead and make a 


search 



Now, when I see the debugger, it will 
return me true as result and hence render 
me the partial view directly. 




public dues HoneController 1 Controller 
{ 




SetrenDy Movie mme 

Name Anony_Movie_69 



Async Search 


Now, let's go ahead and make the search 





an Async Search. Now, before jumping 
into action, let's check what are other 
Ajax helpers which could be useful in 
this case. There are basically three 
AJAX related features which MVC 
provided. They are: - 

@Ajax.BeginForm:- Just now we have 
seen this; Ajax.BeginForm writes out a 
form tag and makes a request to the 
server asynchronously. 

@Ajax.ActionLink:- Just like 
Ajax.BeginForm, Ajax.ActionLink 
creates a link to make an async request 
and update the screen instead of 
navigating the browser to a new page or 
new tab. 



Client Side Validation:- The third 
approach is the JavaScript validation. 
All of these approach used in JavaScript 
validation which is known as 
Unobtrusive Javascript. We have seen 
this also before. Unobtrusive javascript 
means we don't have JS spread 
throughout in the view. Now, let's 
understand what happens behind the 
scene when search is made, in this case 
it is taken care by Ajax.BeginForm 


So, when you look at the source code, 
you can see that Ajax.BeginForm emitted 
data- ( known as datadash attribute) 
attributes in the form tag. Now, data- 
attributes are part of the HTML 5 
specifications. However, you can also 
write your own data- attribute for 
consuming the same in the browser. 

We'll see the same in some time. 

Then, the scripts which we write, there 
will be some JavaScript which will go 
and interpret these data- attributes and 
start attaching the events to add Ajax 
features. Client side validation also 
works the same way. Let's open a 
review page, and then open it source 
code. 



Here, also we can see data- attribute. 
Like if you see the Comments section, 
here in you can see that it is setting 
maximum value to 200, the error 
message to display when it gets 
exceeded and the required field as well. 
So, the JavaScript code coming here is 
finding these data- attributes, 
interpreting the same and then returning 
the result on the page. 


It will also work when JavaScript 


disabled, obviously, in that case we 
won't have client side validation. But it 
will work and nothing will break. So, in 
that case data- attributes won't be 
utilized, rather form will get posted and 
it will have the server side validation. 

Now, let me customize the same by using 
our own JS code. Now, let's modify the 
index page as shown below. 


@model I Enumerable<MovieReview. Models .MovieViewModel> 
ViewBag. Title = "Home Page"; 

E 


<div> 

<form method="get" action="@Url.Action("Index")" data-movie-ajax="true" 
movie-target="#movieDiv“> 

<input type="search" class="form-control has-success" name="SearchQu 
<br /> 

<input type=" submit" class="btn-primary" value="Search by Movie Name 
</form> 

</div> 


@*@using (Ajax.BeginForm( 


new AjaxOptions 
{ 

HttpMethod = "get", 

InsertionMode = InsentionMode . Replace, 

UpdateTargetld = "movieDiv" 

») 

{ 

<input type="search" class="form-contpol has-success" name="SearchQuery"> 
<br /> 

<input type="submit" class="btn-ppimapy" value="Seapch by Movie Name" /> 

>■ 

(BHtml . Paptial( "_movies". Model) 


Here, I have just commented that 
Ajax.BeginForm Section. Rather, than 
that I have enabled the previous one by 
adding some additional piece of 
information. Now, here I have explicitly 
specified the action attribute to make 
sure that form has an action attribute 
using the URL helper to generate a URL 
controller action. Then, I have also 
added two data- attributes, one to 
identify that form should be Ajax and the 


other one is specifying the ID of the div 
which needs to be updated. The idea 
behind this approach is using our own 
JavaScript code to fire and wire up the 
events behind the scene. Now, we need 
to add one JavaScript file in the scripts 
folder. So, I add the same with the name 
“ Movie.js ” as shown below. 



- a Scripts 

0T _references.js 
Of bootstrap.js 
OT bootstrap. min.js 
OT jquery-2.1.0.intellisense.js 
OT jquery-2.1.0.js 
OT jquery-2.1.0. min.js 
Q jquery-2.1.0. min. map 
O' jquery-ui-1.8.24.js 
OT jquery-ui-l.8.24. min.js 
or jquery.unobtrusive-ajax.js 
O' jquery.unobtrusive-ajax.min.js 
O' jquery.validate-vsdoc.js 
OT jquery.validate.js 
OT jquery.validate.min.js 
OT jquery.validate.unobtrusive.js 
OT jquery.validate.unobtrusive.min.js 
OT knockout-2.2.0. debug.js 
OT knockout-2.2.0.js 
OT modernizr-2.6.2.js 
OT Movie.js 


Now, I need to include this file in my 


bundle as I would need this script to be 
available everywhere. 


bundles . Add(new ScriptBundle("~/bundles/movies" ) . Include( 
"^/Scripts/ jquery-{version} . js", 
"~/Scripts/ j query- ui-{ version}. js" , 
"^/Scripts/ jquery . unobtrusive *" , 
""-/Scripts/ jquery . validate* " t 
"~/Scripts/Movie . js") ); 


Now, I need to put some code in there to 
invoke the search and return the result 
back to the screen. Below is the script in 
finished form 


$(function () { 


var MovieFormSubmit = function () { 

//Grab the refernce of the form 
var $form = $(this); 

//Build the options object 
var options = { 

url: $form.attr("action"), 
type: $ form. attr( "method"), 
data: $form. serialize( ) 

>; 

$ . a jax(options) . done(function (data) { 

var target = $($form.attr("data-movie-target")) ; 
target . replaceWith( data ) ; 

»; 

//To prevent the browser from doing it's defualt action means navigating 
away and redrawing the complete page 
return false; 

}; 

//Look for Form with the name "data-movie-ajax", then wire up the submit event. 
$("form[data-movie-ajax='true' ]") .submit (MovieFormSubmit); 

}); 

Now, let me go ahead and explain the 
same step by step. So, here 
“ $(function({ });” is basically invoking 
the JQuery function. Then, I have used 
the JQuery selector to go out and find the 
form that has “ data-movie-ajax ” value 
set to true; then am wiring up the event 


with “ submit ” event. So, when user 
clicks on the search, instead of posting 
back to the server, it will land up here in 
my JavaScript function; in this case it 
will land up in “MovieFormSubmit” . 
So, inside this function I have written the 
code to handle the Form submission. So, 
here it's collecting all the parameters, 
sending them to the server, get the result 
back from the server and then send the 
same back to the browser. 

Now, from the options object, I can get 
the URL by looking at the action 
attribute in the Form. Also, I have 
specified the type of the request which 
will again be fetched from the Form 
value itself. And finally, we need to 



serialize the data which we are sending 
back to the server. Then, I have made the 
Async call by using “ $.ajax ” by passing 
the options object in there and when it is 
done, this function will come into action 
and this will have the response from the 
server in the data object. So, what I have 
done here, I go out and find the target 
with the div id “movieDiv”. Now, let's 
go ahead build the app and test the 
searching facility once again. This time 
this should return the desired result with 
our own custom query. 



Paging:- 


Now, finally I would like to add one 
more feature in this and that is paging. I 
would like to give an option to user so 
that they can page through in the result 
set. Now, to do the paging I need one 
third party component installed in 
application. And obviously to install 
third party component in our application, 




best way is to use NuGet Package 
Manager as shown below. 



Now, I would be installing the 
highlighted one “ PagedList.MVC ” in my 
project. Now, upon installation, we can 
verify the same in our application as 
shown below. 


DotNetOpenAuth.Openld 

DotNetOpenAuth.Openld. RelyingParty 

EntityFramework 

Microsoft.CSharp 

Microsoft.Data.Edm 

Microsoft.Data.OData 

Microsoft.Web.Infrastructure 

Microsoft.Web.Mvc.FixedDisplayModes 

Microsoft.Web.WebPages.OAuth 

NewtonsoftJson 

PagedList 

PagedList.Mvc 

System 

System. ComponentModel.DataAnnotations 
System. Configuration 
System. Core 
System. Data 

■ ■ System. Data. DataSetExtensions 
System. Data. Entity 
System. Drawing 
System. EnterpriseServices 
System. Net.Http 
System. Net.Http. Formatting 
System. Net. Http.WebRequest 
System. Spatial 
System.Transactions 


Now, I can go ahead and start doing 
changes in our application. We'll start 
doing the same from our home 
controller. Now, the index action of our 
home controller will not be returning 
just 10 records, instead it would be 
returning page of records. Now, 
pagedList package will give me some 
helpers to setup the paging. 

So, now in order to use these extension 
methods I need to include the namespace 
for the same as “using PagedList;”. 

Here, I'll be using “ To PagedList” as 
shown below in the index action. Now, 
this extension will take page no as 
declared in the method as a parameter. 



This extension method will also take 
page size, So I'll specify 10 records per 
page. Now below is the modified 
indexation in its finished form. 


1 reference I « 0/1 passing 

public ActionResult Index(string SearchQuery * null, in t page=l) 

{ 


= _movieDb. Movies 

•OrderByDescending(m => m. reviews. Count ()) 

.Wherefm => SearchOuerv — null || m.HovieName.StartsUith(SearchQuery)) 
■ Se;©* ToArrayo 
{ ©j, ToDictionaiyo 

©i ToListo 
©* ToLookupo 


© ToString 
if (Request. IsAjaxRequest()) 

t 

return PartialView("_movies”, model); 


(extension) IPagedList<T> lQueryable<T> .ToPagedList< T>(int pageNumber. int pageSize 
overioad(s)) 

(The documentation cache is still being constructed. Please try again in a few seconds.) 


View(model); 


public ActionResult Index(string SearchQuery = null,int page=l) 

{ 

var model = _movieDb .Movies 

.OrderByDescending(m => m. reviews. Count()) 

. Where(m=>SearchQuery==null | |m.MovieName. Start sWith( Search 

Query)) 

. Select (m => new MovieViewModel 

{ 

Id = m.Id, 

MovieName = m.MovieName, 

DirectorName = m.DirectorNamej 
ReleaseYear = m. ReleaseYear, 

NoOf Reviews = m. reviews .Count () 

}) .ToPagedList(page, 16); 
if (Request. IsAjaxRequest()) 

{ 

return PartialView( "_movies", model); 

> 

return View(model); 

> 

That's it. This much was the change in 
server side. Now, we need to 
incorporate the changes for the same in 
the UI. So, obviously the 1 st change in 
the view is to change the model type; as 
now the model type would be 
“ IPagedList Now, in order to resolve 
these new types, I need to update the 


namespace in the “ web.config ” inside 
the “Views” folder as shown below. 

< system . web . webPages . razor > 


<host f actoryType="System . Web . Mvc .MvcWebRazorHostFactory , System . Web . Mvc , 
Version=4. 0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> 

< pages pageBaseType="System . Web . Mvc . WebViewPage" > 

< namespaces > 

<add namespace="5ystem. Web. Mvc" /> 

<add namespace="System. Web. Mvc. Ajax" /> 

<add namespace="System.Web.Mvc.Html" /> 

<add namespace= "System . Web . Optimization"/ > 

<add namespace="System. Web. Routing" /> 

<add namespace="PagedList"/> 

<add namespace="PagedList.Mvc"/> 

</namespaces> 

</ pages > 

</system . web . webPages . razor> 

So, here I have added two namespaces 
as shown above for the pagedList. Now, 
in order to take this effect, what I need to 
do is just close the Visual Studio and 
start again, and then it will take the 
effect. 


@model IPagedList<MovieReview. Models .MovieViewModel> 
ViewBag. Title = "Home Page"; 

I 


<div> 

<form method="get" action="@Url .Action( "Index" ) " data-movie-a jax="true" data- 
movie-target="#movieDiv"> 

<input type=“search" class="fonm-control has-success" name="SearchQuery"> 
<br /> 

<input type="submit" class="btn-primary" value="Seanch by Movie Name" /> 
</form> 

</div> 

@*@using (Ajax.BeginForm( 
new AjaxOptions 
{ 

HttpMethod = "get", 

InsertionMode = InsertionMode. Replace, 

UpdateTargetld = "movieDiv" 

») 

{ 

<input type="search" class="form-control has-success" name="SearchQuery"> 

<br /> 

<input type="submit" class="btn-primary" value="Search by Movie Name" /> 

}§» 


@Html . Partial( "_movies" , Model) 

Now, from this index view I am also 
rendering this partial view. So, I also 
need to change the model directive there 
in the partial view as well. 


(Slmodel IPagedList<MovieReview. Models .MovieViewModel> 


<div id="movieDiv"> 

<div class="pagedList" data-movie-target="#movieDiv"> 

@Html . PagedListPager(Modelj page => Url.Action("Index", new { page}), 
PagedListRenderOptions.MinimalWithPageCountText ) 

</div> 

^foreach (var item in Model) { 

<div> 

<h4>Name - @item.MovieName</h4><bn /> 

<h5>Director - @item.DirectorName</h5> 

<h5>Release Year - §Jitem.ReleaseYear</h5> 

<h5>No Of Reviews - @item.No0fReviews</h5> 

<hr /> 

</div> 

} 

<div class="pagedList" data-movie-target="#movieDiv"> 

@Html . PagedListPager(Model, page => Url. Action("Index", new { page }), 
PagedListRenderOptions.MinimalWithPageCountText ) 

</div> 

</div> 


Now, as you can see in the above code I 
have put one section for pager. Now, 
obviously you could select whatever 
render options you are comfortable 
with. Also, I have put the paging ability 
both at the top of the page and at the 
bottom of the page. Now, when I build 


the application and refresh the page, it 
will present me the below output. 



Now, when I click on the next button, it 
will fetch me next 1 0 records from the 


2 nd page. 







So, it's working. But, currently it's not 








making the async search. So, in order to 
fix the same, we need to switch to the 
javascript file and add the async 
capability for paging as well. So, here 
what I am going to do; add “ main- 
content ” which is there in Layout view 
as shown below in my custom script 
section. 

<div> 

<section class="main-content"> 
@RenderBody( ) 

</section> 

</div> 

Then, I am going to wire up the click 
event of this section in the main-content 
as this contains all the view as it 
rendered. Now, below is the script code 


in its finished form. I have also put the 
comments wherever necessary to 
understand the script. 

$(function () { 

var MovieFormSubmit = function () { 
//Grab the refernce of the form 
var $form = $(this); 

//Build the options object 
var options = { 

url: $form.attr("action"), 
type: $form.attr("method"), 
data: $form . serialize( ) 


}; 

$. a jax(options ) .done(f unction (data) { 

var target = $($form.attr("data-movie-target")); 
target. replaceWith( data) ; 

}); 

//To prevent the browser from doing it's defualt action means navigating 
away and redrawing the complete page 
return false; 

}; 

var fetchPage = function () { 

//Get the anchor tag that user clicked on 
var $anchor = $(this); 

//Extract values like Href attributes which is in the anchor tag 
var options = { 

url: $anchor.attr("href "), 
data: $("form") . serialize( ), 
type: "get" 

}; 

//make the ajax request with options object, when the data retrieved 
successfully, 

//go and find out the target and then replace the taret with the fetched 

one 

$.ajax(options) .done(f unction (data) { 

var target = $anchor. parents ("div. pagedList" ) .attr("data-movie- 

target"); 

$(target) .replaceWith(data); 

}); 

return false; 

>; 

//Look for Form with the name "data-movie-ajax", then wire up the submit event. 
$("form[data-movie-ajax='true ' ]") . submit (MovieFormSubmit); 

//Find the main-content and wire up the click event then filter these events 
based on ".pagedList a" 

//then call the method fetchPage 

*<■ .main-content") .on("click", ".pagedList a", fetchPage); 


Now, with the above piece of changes in 
place, I could go ahead and test my app. 
So, just build and refresh the page and 
see if it works. So, now I can see that 
paging is happening asynchronously 
without breaking anything. With this 
topic, we have come to an end of this 
chapter. In the next chapter, we'll discuss 
more on security features in MVC. 


Summary:- 

So, in this chapter we have enabled Ajax 
features in our application. We have 
seen different Ajax Helpers in action. 

We have also seen how to work with 
Jquery to do the DOM manipulation. We 


have enabled custom search capability 
to search the results. In the end we have 
added paging facility as well to enable 
the users to page through the list. 



Chapter 7: 
Security with 


ASP.Net MVC 


WHAT DO you find in 
this CHAPTER? 


=> Introduction 


Authentication 


=> Membership and Forms 
Authentication 

=> Authorize 

=> Seeding Membership 

=> Cross Site Vulnerability 

=> OpenID and OAuth 

=> Summary 

Introduction:- 


Hi Friends, in this section we'll go one 
step ahead by implementing security 


features in our application. In this 
chapter we'll be working with users, 
roles and also see that how to use 
OpenlD and OAuth in our application 
so that our users can sign in to our 
application by using third party 
authentication scheme. We'll also come 
across some of the most common attacks. 
We'll see Cross Site Request Forgeries 
and how to prevent the same. We begin 
the chapter by looking at different styles 
of authentication available in our 
application. 


Authentication 


Authentication of user means verifying 


the identity of the user. This is really 
important. You might need to present 
your application only to the 
authenticated users for obvious reasons. 
We have couple of authentication in 
place like 

Forms Authentication: - 
Windows Authentication: - 
Open ID/ OAuth:- 

So, let me go ahead and discuss very 1 st 
Forms Based Authentication. With 
forms based authentication, websites are 
basically responsible for presenting a 
page with user id and password options. 
With this page, user has to fill in his 
credentials to log into the website. 



Forms authentication basically relies on 
cookies. So, once the user signed in to 
an application, the runtime will store a 
cookie in the browser itself, hence they 
don't need to sign in again during the 
same browsing session. Many a time 
SSL(Secure Socket Layer ) is 
introduced to make the Forms 
authentication secure. 

2 nd type of authentication is windows 
authentication. It's basically used for 
Intranet applications. It's pretty much 
bound to the components which are 
provided by the Windows operating 
system. So, here basically all the users 
are get authenticated by windows active 
directory logged in windows domain. 



Here, users will be having the single 
sign on experience. As user logged in 
windows, user can use any facilities 
provided by the windows. 

Now, the third way to authenticate users 
using OpenlD or OAuth. These are 
open standards for authentication and 
authorization respectively. It means 
users don't need to create passwords 
with our site, rather they can get 
authenticated with any third party site 
like Microsoft, Face book, Google etc 
and upon successful authentication, they 
will get redirected to our site. 

Now, the application “Movie Reviews” 
which we have been working on; relies 



on Forms Authentication because we 
have selected the Internet application 
template. Now, in order to demonstrate 
that how window authentication works, 
let's create a new project with the name 
“Windows Authentication” with intranet 
settings as shown below. 



New ASP.NET MVC 4 Project 


Project Template 
Select a template: 


55 

55 

55 

55 

Emp,y 

B.sic 

Internet 

Application 

Intranet 

Application 

o 

55 
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Mobile 

Web API 

Sinqle Paqe 

Facebook 

Application 


Application 

Application 


A default ASP.NET MVC 4 project that 
s Windows authentication or Windows 
Azure authentication. 


□ Create a unit test project 
Test project name: 

WindowsAuthentication.T ests 
Test framework: 

[ Visual Studio Unit Test ^~| Additional Info 


OK 


Cancel 



T,: SHHHHKSHHHKW 









So, now the project is setup successfully 
and Visual studio presented me the 
readme.txt file. So, whenever we create 
any intranet application, by default it 
will present me this manual. It has 
couple of steps that one has to follow for 
this to work. Now, in order to setup 
windows authentication, I need to set the 
properties, it's not the project property 
from where I can set this up. Either I can 
press F4 key by highlighting the project 


in the solution explorer in visual studio 
to go in the properties window or in the 
(View — > Properties Window). Upon 
clicking it will open me the below 
window. 



Now, as you can see in the above screen 
shot that Windows Authentication is 
disabled. Now, to set up windows 
authentication, I just need to enable this 
flag as shown below. 







0 favican.ko 

43 °'°ta U "Li 

V? Web.config 


Now, with this property setup, I am good 
to go. So, now when I run the 
application I should be getting my name 
with my domain name flagged in there. 



Getting Started 


© 
© 1 


Now, if I inspect the code for the same 



in Layout views, it checks the 
“ @User.Identity.Name ” to pick-up the 
user from the Domain Directory. 
However, the same property will be 
used in Forms Authentication as well. 
With the above piece of code, we could 
verify whether the users are 
authenticated or not and many more 
related with user and authentication. 
Other difference you might notice in the 
web.config file where in authentication 
section is marked as windows. 

Authentication mode="Windows" /> 

In case if it would have been Forms 
based authentication, then in that case it 
would have been “ Forms ”. 


Now, the next thing is Forms based 
authentication. So, basically what 
happens in Forms Authentication is like 
let's suppose on your site, there is some 
restricted page which needs user 
authentication, so when you try to invoke 
that page from the URL, application will 
redirect you to the login page where in 
you will provide your credentials and 
upon authentication, it redirects you to 
required page. Again, ASP.Net 
architecture works here in such a way, 
that it saves the request in the 
“ returnUrl” parameter in URL itself 
and then when user get authenticated, 
user will get redirected to that particular 
page. ASP.Net also gives browser a 
cookie for the application. 



So, a cookie is nothing but a piece of 
data which the browser will hold. And 
once the browser holds the cookie for 
the site, it will continue to send the 
cookie along with every request which 
came to the site as long as browsing 
session is not closed. Now, inside this 
cookie, there is some cryptic information 
letting ASP.NET know that user is 
already authenticated and hence user can 
access those restricted pages which 
required authentication. So, this is how 
Forms Authentication works in general. 

Now, let me go ahead and explain the 
setting which we have been using so far 
in our application. Since we have 
created our project based on internet 



application, so visual studio also 
created default structure needed for the 
user to Sign Up, then Sign In, Change 
Password and many more basic stuffs. 
So, all these basic stuffs are provided by 
the “ AccountController ” in our 
application; which will obviously base 
on separate user actions will render 
different views as shown below in the 
screen shot. 



a Views 

a Account 

[@] _ChangePasswordPartial.cshtml 

[@] _ExternalLoginsListPartial.cshtml 

[@] _RemoveExternalLoginsPartial. cshtml 

[@] _SetPasswordPartial.cshtml 

C@] ExternalLoginConfirmation.cshtml 

[@] ExternalLoginFailure.cshtml 

C@] Login. cshtml 

[@] Login_backup. cshtml 

[@] Manage.cshtml 

[@] Register.cshtml 


And also associated to this controller 
there is one model associated which you 
could find in the Models folder with the 
name “AccountModels”. Now, if you see 
inside the Account controller code as 
shown below, you will come to know 
it's using a class with the name 
“WebSecurity” 


[HttpPost] 

[AllowAnonymous] 

[ValidateAntiForgeryToken] 

public ActionResult Login( LoginModel model, string returnUrl) 

{ 


if (ModelState.IsValid && WebSecurity. Login(model .UserName, 
model. Password, persistCookie : model . RememberMe) ) 

{ 

return RedirectToLocal( returnUrl ) ; 

> 

// If we got this far, something failed, redisplay form 
ModelState.AddModelError("", "The user name or password provided is 
incorrect. "); 

return View(model); 

> 

Now, WebSecurity is basically 
inherited from Microsoft Library named 
“ WebMatrix So, WebMatrix is 
another tool from Microsoft to build 
websites. Here ASP.Net MVC just used 
this technology to implement Forms 
Authentication. So, now it's WebSecurity 
class which will talk to account 
controller and validate the user. 


Now, in return WebSecurity talks to one 
component called 

‘ ‘Sim pleM ember sh ip Pro vider’ ’ . So, 
ultimately, Membership Provider doing 
all the hard work of storing user's 
information in the database. Now, one 
point to note here, this is just the default 
settings which are given to developers 
by Visual Studio. Microsoft never 
mandates like it has to be like this only. 
So, obviously you can go ahead and 
customize the controller and views as 
you like. But, again it gives a good 
starting point to go ahead with your 
application. I'll show some of the steps 
that how to customize later in this 
chapter. 



Membership and Forms 
Authentication 


Now, before we dig inside the Account 
controller's code and see how it works, 
let me explain few more steps that 
what's happening behind the scenes 
especially at the database layer. So, here 
I'll be customizing the information which 
is being stored at the user level in the 
database. So, the very step in this case is 
coming up and looking for the file 
LL I nitializeSimple Member ship Attribute 
in the “ Filters ” folder. So, if we open 
this file, there's a bunch of complex code 
is there, basically generic code. It is 
written in such a fashion, that either we 


could use Forms Authentication or some 
other Authentication. Hence, Forms 
Authentication in here is initialized in a 
lazy manner. But, since we have already 
decided that we need to use the Forms 
Authentication, hence there is no need to 
use the complete bunch of code. The line 
of code which really makes sense over 
here is pasted below. 


WebSecurity . InitializeDatabaseConnection("DefaultConnection", "UserProf ile" , 
"Userid", "UserName", autoCreateTables : true); 

Here, in the above case WebSecurity is 
initializing the database with some of the 
default parameters as shown above. The 
1 st parameter which it takes is the 
connection string, now this is the same 
connection string which we are using 


here for our application as well. 2 nd 
parameter which it takes is the name of 
the table which will contain the user 
information. 3 rd parameter is the column 
in the table which contains the primary 
key value and the 4 th parameter is the 
column which contains the user name 
value. 

Now, obviously you can go ahead and 
customize this table as well; you can 
have as many columns as you want to 
store user profile related values in the 
table. So, if we are 100% sure that we 
are using Forms Authentication, then we 
take this piece code from here and use 
the in “ global.asax ” file. So, this piece 
of code we don't need any more in this 



file. So, now my global. asax file will 
look like below. Now, if you want to be 
consistent the way global. asax file code 
written, then in that case you can wrap 
up this piece of code in some class and 
call the Register method from here. But, 
for now it's ok to have the same here 
itself. 


public class MvcApplication : System. Web. HttpApplicat ion 

{ 

protected void Application_Start( ) 

{ 

WebSecurity . InitializeDatabaseConnection( "Def aultConnection", 
"UserProf ile", "Userid", "UserName", autoCreateTables : true); 
AreaRegistration . RegisterAllAreas ( ) ; 

WebApiConf ig . Register (GlobalConf iguration . Configuration ) ; 
FilterConf ig . RegisterGlobalFilters(GlobalFilters . Filters) ; 
RouteConf ig . Register Routes ( RouteTable . Routes ) ; 

BundleConfig. RegisterBundles(BundleTable. Bundles); 

AuthConfig. RegisterAuth( ); 

> 

> 


Now, since we have moved this piece of 


code in our global. asax file. So, we 
don't need 

“InitializeSimpleMembership Attribute 

file any more, hence we can go ahead 
and delete the same. Now, there is one 
more thing which I need to do, inside the 
models folder there is file 
“ AccountModels.es ” as shown below. 

using System; 

using System. Collections .Generic; 

using System. ComponentModel . DataAnnotations; 

using System. ComponentModel . DataAnnotations . Schema; 

using System. Data . Entity; 

using System. Globalization; 

using System. Web . Security; 

namespace MovieReview. Models 

{ 

public class UsersContext : DbContext 

{ 


public UsersContext( ) 


{ 

> 


: base("DefaultConnection") 


public DbSet<UserProfile> UserProfiles { get; set; } 

} 

[Table( "UserProf ile" ) ] 
public class UserProfile 
{ 

[Key] 

[DatabaseGeneratedAttribute(DatabaseGeneratedOption . Identity) ] 
public int Userid { get; set; } 
public string UserName { get; set; } 

} 

public class RegisterExternalLoginModel 

{ 

[Required] 

[Display (Name = "User name")] 
public string UserName { get; set; } 

public string ExternalLoginData { get; set; } 

> 

public class LocalPasswordModel 

{ 

[Required] 

[DataType(DataType. Password)] 

[Display (Name = "Current password")] 
public string OldPassword { get; set; } 

[Required] 

[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters 
long.", MinimumLength =6)] 

[DataType(DataType . Password) ] 

[Display (Name = "New password")] 
public string NewPassword { get; set; } 

[DataType(DataType . Password ) ] 

[Display (Name = "Confirm new password")] 

[Compare( "NewPassword", ErrorMessage = "The new password and confirmation 
password do not match.")] 

public string ConfirmPassword { get; set; } 

} 



public class LoginModel 

{ 

[Required] 

[Display(Name = "User name")] 
public string UserName { get; set; } 

[Required] 

[DataType(DataType. Password)] 
[Display(Name = "Password")] 
public string Password { get; set; } 

[Display (Name = "Remember me?")] 
public bool RememberMe { get; set; } 


public class RegisterModel 

{ 

[Required] 

[Display (Name = "User name")] 
public string UserName { get; set; } 

[Required] 

[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters 
long.", MinimumLength =6)] 

[DataType(DataType . Password) ] 

[Display (Name = "Password")] 
public string Password { get; set; } 

[DataType(DataType. Password)] 

[Display (Name = "Confirm password")] 

[Compare("Password", ErrorMessage = "The password and confirmation 
password do not match.")] 

public string ConfirmPassword { get; set; } 

> 

public class ExternalLogin 

{ 

public string Provider { get; set; } 

public string ProviderDisplayName { get; set; } 

public string ProviderUserld { get; set; } 

} 


Now, if you see the snippet closely you 
will recognize that there is a 
“ UserContext ” class which is derived 
from “ DbContext ” .But, now we want to 
control this, now we want to have this 
by our “ db context ” class which we 
have already created. So, I am going to 
delete this section. Now, just below to 
that section, you could see there is an 
auto generated code for the 
“User Prof lie” table, which we want to 
customize. So, in order to do the same, I 
just cut that piece of code and put the 
same in a new class file named as 
“User Profile” under the models folder 
and paste the code in there. Now, in this 
class I need to bring in the name space 
for the “Table” annotation. So, below is 



the snippet of the user profile table in its 
finished form. 


using System; 

using System. Collections .Generic; 

using Sy stem. ComponentModel.DataAnnotat ions; 

using System . ComponentModel . DataAnnotations . Schema; 

using System. Linq; 

using System. Web; 

namespace MovieReview. Models 

{ 

[Table( "UserProf ile" ) ] 
public class UserProfile 
{ 

[Key] 

[DatabaseGeneratedAttribute(DatabaseGeneratedOption . Identity) ] 
public int Userid { get; set; } 
public string UserName { get; set; } 

public string FavoriteColor { get; set; } 

> 

> 

So, if you see the above snippet I have 
added one custom property saying 
favorite color for the user in the User 
profile table. Now, there is “[Key]” 


annotation there before the “ Userid ” 
column which is telling the Entity 
Framework that this is primary key in the 
table. Also, associated to that there is 
identity field which means that database 
will manage the new values coming in 
the database by just auto incrementing 
the same by 1 . Now, I need to define the 
way to get into my own “ DbContext ” 
class. So, I'll go into the file 
“ MovieDb.es ” and add one property for 
the same. 



using System; 

using System. Collections .Generic; 
using System. Data; 
using System. Data . Entity; 
using System. Linq; 

using System. Security . AccessControl; 
using System. Web; 

namespace MovieReview. Models 

{ 

public class MovieDb :DbContext 

{ 

public MovieDb () 

: base( "name=Def aultConnection" ) 

{ 

} 

public DbSet<UserProfile> UserProfiles { get; set; } 

public DbSet<Movie> Movies { get; set; } 

public DbSet<MovieReviews> MovieReviews { get; set; } 

} 

} 


Now, since we have made a change in 
our context file, hence we need to do the 
schema migration in order to get the 
effect. But, before that we need to fix 
few errors. So, when we do build it will 
list me few errors as shown below 
because we have deleted the file from 
the filters table. 






T • © 3 of 3 Errors | i ! or '■ - - 



| Search Error List P - 

Description 

File 

Line 

Column Project 

Q 1 The type or namespace name 'Filters' does not exist in the namespace 'Movie 

eview' (are you AccountContr 

ller.cs 11 

19 MovieReview 

missing an assembly reference?) 

be found (are you AccountContn 

Mercs 17 

6 MovieReview 

missing a using directive or an assembly reference?) 




a using directive or an assembly reference?) 





Now, these errors are quite educational, 
so when you double click on the same, 
you will get the below thing 




Now, when you click on the 2 nd error 
you will reach there 



Now for the below error, you just need 
to modify the context name, here you 
need to specify our context name which 


we have been using in our application. 



Now, the modified code for the above 
error in its finished form is pasted 
below. 


if (ModelState . IsValid) 

{ 

// Insert a new user into the database 
using (var db = new MovieDb()) 

{ 

UserProfile user= db.UserProf iles . FirstOrDefau 
u. UserName. ToLower() == model .UserName.ToLower( ) ); 

// Check if user already exists 
if (user == null) 

{ 

// Insert name into the profile table 
db. UserProf iles .Add( new UserProfile {User 

model. UserName }); 

db. SaveChanges( ) ; 

OAuthWebSecurity . CreateOrUpdateAccount ( prov 
providerUserld , model . UserName) ; 

So, up there in that section I have used 
my context name “ MovieDb Now 
when I build the same it will succeed. 
Here, I can go ahead and open the 
package manage console to migrate the 
modified schema with the Powershell 
Command “Update-Database -Verbose”. 
Now, upon successful completion, it 
will present me the below output 


So, in the above screen shot you can see 
that, it has added new User profile table 
with my custom field in there. Now, 
when I go ahead and refresh the database 
schema, I should be able to see the 
newly added field in the table. 


dbo.UserProfile [Data] -o X 



C2 > Max Rows: [ 1000 


n & 


Userid 

* I NULL 


NULL 


UserName 


NULL 


FavoriteColor 


Now, let's go ahead and look at the piece 
that how Forms Authentication works in 
our application. What I will do, I'll go 



ahead and click on the register link 
shown below and register myself. 



[ Q Iocalhost:1034/Atcoiinl/Regis1ei 


O Register 

Select One Home About Contact Movies o Login 


Register. 

Create a new account. 

Register Form 



And then my name will appear on the 







page as shown below and that's done 
using “ User.Identity.Name ” property. 



Now, at this point I can manage my 
account to change my password by just 
clicking on my name as shown below:- 





I can also go ahead and log off myself by 
clicking on the link shown in the page. 
So, all the basic stuffs I would be able to 
do with the site. All of these 
functionalities are provided to us by the 
Internet application template which we 
have selected for creating the 
application. Now, the Register Form 
from where I have registered myself in 
the application sits in the Account 




folder under Views folder. Now, below 
is the code for same. However, I have 
modified the code a bit to fix the look 
and feel of the website. 



@model MovieReview . Models . RegisterModel 

@{ 

ViewBag . Title = "Register"; 

1 

<hgroup class="title"> 

<hl >@ViewBag. Title . </hl> 

<h2>Create a new account . </h2> 
</hgroup> 

fusing (Html . BeginForm( ) ) 

{ 

@Html . AntiForgeryToken( ) 

@Html . ValidationSummary ( ) 

<form class="form-horizontal"> 

<fieldset> 

<legend>Register Form</legend> 


<div class="form-group"> 


@Html . LabelFor(m => m.UserName) 

<div class="form-control" > 

@Html.TextBoxFor(m => m.UserName) 

</div> 

</div> 

<div class="form-group"> 

@Html. LabelFor(m => m. Password) 

</div> 

<div class="form-control"> 

@Html.PasswordFor(m => m. Password) 

</div> 

<div class="form-group"> 

@Html. LabelFor(m => m.ConfirmPassword) 

</div> 

<div class="form-control"> 

@Html . PasswordFor(m => m.ConfirmPassword) 

</div> 

<P> 

<br /> 

<input type=" submit" class="btn-primary" value="Register" /> 

</p> 

</fieldset> 

</form> 

} 

^section Scripts { 

| 

Now, this is the place where in you can 
force user to provide their favorite color 
while registering themselves with the 
application. Favorite Color is the 


custom property which we have added 
in User Profile table. Now, this form is 
getting rendered from the Account 
controller's Register action as shown 
below. So, by just looking at the piece of 
code, you should be now able to identify 
that what this piece of code is doing 
here. 

// 

// GET: /Account/Register 


[AllowAnonymous] 

public ActionResult Register() 

{ 

return View(); 

> 

And we also have Register method as 


shown below with Post request which 
takes our input from the Form and 
commit the same in the database. Below 
is the piece of code which is doing the 
same. 



[ValidateAntiForgeryTokenJ 

public ActionResult Register(RegistenModel model) 

{ 

if (ModelState.IsValid) 

{ 

// Attempt to register the user 
try 
{ 

WebSecurity .CreateUserAndAccount(model .UserName, 

model . Password ) ; 

WebSecurity . Login ( model . UserName, model . Password ) ; 
return RedirectToAction( "Index", "Home"); 

> 

catch (MembershipCreateUserException e) 

{ 

ModelState.AddModelError( n ", ErrorCodeToString(e.StatusCode) ); 

} 

> 

// If we got this far, something failed, redisplay form 
return View(model); 

> 

Now. as you can see in this method, we have " RegisterModel " like a View Model contains only 
the information about the user as shown below which is there in the AccountModels.es " class. 

public class RegisterModel 

{ 

[Required] 

[Display(Name = "User name")] 
public string UserName { get; set; } 

[Required] 

[StringLength(l00, ErrorMessage = "The {0} must be at least {2} characters 
long.", MinimumLength =6)] 

[DataType(DataType. Password) ] 

[Display(Name = "Password")] 


Now, as you can see in this method, we 
have “ RegisterModel ” like a View 


Model contains only the information 
about the user as shown below which is 
there in the “ AccountModels.es ” class. 


public class RegisterModel 

{ 

[Required] 

[Display (Name = "User name")] 
public string UserName { get; set; } 

[Required] 

[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters 
long.", MinimumLength =6)] 

[DataType(DataType. Password)] 

[Display(Name = "Password")] 


public string Password { get; set; } 

[DataType(DataType . Password) ] 

[Display (Name = "Confirm password")] 

[Compare("Password", ErrorMessage = "The password and confirmation 
password do not match.")] 

public string ConfirmPassword { get; set; } 

> 

Now, in the register method, it's using 
the call for “ WebSecurity 
WebSecurity is basically a wrapper 
around membership functionality. It takes 


care of all the basic stuffs like data 
access, security and all the other stuffs 
which you need for Forms based 
authentication. Then, I can see that there 
is a call for “ CreateUserAndAccount ”, 
This is the call which will insert my 
record in the database. Now, if you 
remember that we have modified the 
default context with our context and 
specified the same under the connection 
“ DefaultConnection” which is being 
used by our application to manage 
“ Movies ” and “Movie Reviews” table. 
Now, when I open the Server explorer 
and look our database, it will list below 
shown tables. 




' *• Data Connections 

DefaultConnection (MovieReview) 
* Tables 

t> MovieReviews 

t> Movies 

t> 5 UserProfile 


t> webpages_Membership 

t> webpages_OAuthMembership 

t> webpages_Roles 

t> webpagesJJsersInRoles 

> Views 

t> Stored Procedures 

|> Functions 

|> Synonyms 

> Types 

> Assemblies 
t> « Servers 

i> gi SharePoint Connections 
t> Sr Windows Azure 



So, 1 st three tables are those tables 
which we have created and customized 
and hence own its behavior. However, 
other tables which are started by 
“ webpages ” are created by 
“ WebSecurity ” class. Now, if I open the 
user profile table, it will present me the 
below information. 


dbo.UserProfile [Data] -0 X 

■ « I 


AccountModels.es Register.cshtml 


Max Rows: 1000 


n 5 > 



Userid 

UserName 

FavoriteColor 

► 

a 

rahulsahay 

NULL 

* 

NULL 

NULL 

NULL 


It created the table exactly same how we 
defined. Since, we haven't provided the 
option for “ FavoriteColor ” while 
registering the user in the view, hence it 



is “NULL” there. However, 

“ UserName ” is exactly the same how 
we entered while registering. Now, if 
open the table 

“webpagesMembership ” , I can see 
that there is one column “ Userid ” with 
the same value what we have in 
“ UserProfile ” table. So, now this 
column could be used to join these two 
tables for any specific query. 



Now, as you can see in the above screen 
shot it has many other important columns 
which keep track of user logging 
activities. If you look closely, it stores 
the password in cryptic format. 


WebSecurity stores the password in 
hashed format which is good for user 
security. Since we have seen that how 
and where the user data is getting stored, 
let's return to our Account Controller 
and see the next call where in its making 
the call to “ Login ” in the Register Post 
action. However, you may see the same 
call in Login method, when user clicks 
on the Login button. 

It's simply taking your username and 
password and passing the same to 
WebSecurity for validation. So, here if 
the Model State is valid and we get 
authenticated by the WebSecurity, then in 
that case we get redirected to the Return 
URL. So, here “ WebSecurity. Login” 



takes these two input and validate the 
same with the record stored in the 
database, and if they match, it will issue 
a cookie to the browser we discussed 
earlier. Now, in order to explain the 
same in detail, let's open chrome 
debugger tool and open the network tab 
as shown below. 


«■ C Q localhosC1034/Account/Login 


Use a local account to log in. 

Log in Form 






Now, as you see in the above screen 
shot, I have entered my credentials and 



checked on the “ Remember me?” 
button, so that browser can remember 
me for that I am authenticated for the 
same browsing session. Now, when I 
click on “ Log in” button, it will show 
the below output. 



So, what happened here, it determined 
that I logged in successfully and hence 
returned a 302 result which is a HTTP 
Redirect Code. Hence, it redirected me 
to the home page, which you can see in 
the 2 nd result just after POST 302. Now, 
if open up this response from the 


Webserver and go to the headers section 
as shown below, the important thing here 
is “ Set-Cookie ” header which is setting 
the cookie with the name starting with 
“AXPAUTH”. 





Set-Cookie: .ASPXAUTH=C9FEBA21F6C5EC892B27D7A5B97F9D39C3D043F3AF94BD9398B520AA018C636765C3A0BB2F7718DECCC82ED21AM44B70FC90OB6B27A856F446223412E649583836e2713B 





But, the other thing which I would like to 
show here, above this section the 
“ FormData ” section, which is also 
showing my Username and Password. 



So, as you can see in the network traffic 
my credentials are well exposed, so if 
some smart hacker is trying to sniff in the 
traffic, he can easily get hold of my 
credentials. Hence, all transactional 
websites always go for security 
certificate to prevent this kind of 
scenario. Hence, they acquire an SSL 
Certificate and install the same on the 
Webserver, and hence users are forced to 
go through login process via “HTTPS”. 
However, we could also use one action 
filter known as “[. RequireHttps ]” which 
makes sure that request is arriving is 
coming over a secure encrypted 
connection. 



-|® LogOffp" 


II POST: /Account/Login 

[HttpPost] 

[AllowAnonymous] 

I [Va lidateAnt iForgary Token] 

[RequireHttps] 

^ references 

B public ActionResult Login(LoginModel model, string returnUrl) 

{ 

if (ModelState.IsValid 88 WebSecurity.Login(model.UserName, model . Password, persistCookie: model. RememberMe)) 

{ 

return RedirectToLocal( returnUrl) s 


// If we got this far, something failed, redisplay form 
return View(model); 


But, for this to work you need to install 
the SSL certificate on the server, 
otherwise it will return 500 error from 
the server. Hence, for now just undo that 
change. 

Authorize 

Now, let me go ahead and explain the 
Authorize attribute. Let's suppose that in 


your application, you want to restrict 
few pages or few actions only to be 
accessed by authorized people, and then 
in that case we can use this action filter. 
We can either put the same before the 
Controller itself so that entire actions in 
that controller get restricted or to a 
particular action. Let, me show that. So, 
now what I am going to do is to restrict 
the Index Action in the Home 
Controller, so it will only be available 
when user logged in to the site. 



[Authorize] 

public ActionResult Index( string SearchQuery = null,int page=l) 


{ 


var model = 

_movieDb . Movies 

. Wher 

.OrderByDescending(m => m.reviews.Count()) 
e(m=>SearchQuery==null | | m.MovieName. Start sWith( SearchQuery) ) 
.Select(m => new MovieViewModel 
{ 

Id = m.Id, 

MovieName = m.MovieName, 

DirectorName = m.DirectorName, 

ReleaseYear = m. ReleaseYear, 

NoOf Reviews = m. reviews. Count () 


}) .ToPagedList(page, 10) ; 
if (Request . IsAjaxRequest( ) ) 

{ 

return PartialView( "_movies", model) 

> 

return View(model); 

> 


Now, what will happen here, when I try 
to navigate to the Home link, it will 
navigate me to the Login page 1 st . 


Q localho5t:1034/Accounl/Login?ReturnUH=%2f 


® Regist< 

Select One Home About Contact Movies o Login 


Log in. 

Use a local account to log in. 

Log in Form 



Now, when I provide my login 
credentials in there, then only I would be 
able to view the Home page as shown 
below. 



Iccaihoit:-'.': LX X --:-i 


Select One Home About Contact Movies » Login 


Log in. 

Use a local account to log in. 

Log in Form 




So, as you can see in the above screen 
shot it navigated me to the required 
home page. Now, I can also use this 
authorize attribute with the user name or 





user names separated by comma as 
shown below:- 


[Authorize(Users= "rahulsahay,nivedita" ) ] 

public ActionResult Index(string SearchQuery = null,int page=l) 

{ 


var model = _movieDb. Movies 

.OrderByDescending(m => m. reviews .Count( ) ) 


. Where (m=>SearchQuery==nu 11 | | m.MovieName .Start sWith( SearchQuery) ) 
. Select (m => new MovieViewModel 
{ 

Id = m. Id, 

MovieName = m.MovieName, 

DirectorName = m.DirectorName, 

ReleaseYear = m. ReleaseYear, 

NoOf Reviews = m. reviews .Count ( ) 

}) .ToPagedList(page, 10); 
if (Request . IsAjaxRequest( ) ) 

{ 

return PartialView( "_movies", model); 

} 

return View(model); 


And also I can do the filtering based on 
the roles. So, let's assume that you have 
certain roles created in your membership 


database like Admin and SuperAdmin, 
and then you can use them as shown 
below. 


[Authorize(Roles= "admin, superadmin" ) ] 
public ActionResult Index(string SearchQuery = null,int page=l) 
{ 


var model = _movieDb. Movies 

.OrderByDescending(m => m. reviews. Count()) 

. Where(m=>SearchQuer==null | | m.MovieName.StartsWith(SearchQuery) ) 
. Select (m => new MovieViewModel 
{ 

Id = m. Id, 

MovieName = m.MovieName, 

DirectorName = m.DirectorName, 

ReleaseYear = m. ReleaseYear, 

NoOf Reviews = m. reviews .Count () 

}) .ToPagedList(page, 10); 
if (Request . IsAjaxRequest( ) ) 

{ 

return PartialView( "_movies", model); 

> 

return View(model); 

} 

Now, I have defined roles in there with 
the action filter, but we haven't created 
any roles yet as you can see the below 


roles table is empty so far. 


« *¥ *s Is- 

a yi Data Connections 

a DefaultConnection (MovieReview) 
a Tables 

> g§ MovieReviews 

> gg Movies 

t> ffl UserProfile 

> webpages_Membership 

> §1 webpages_OAuthMembership 
[> §§ webpages_Roles 

t> webpages_UsersInRoles 


dbo.webpages_Roles [Data] •« x cs 

O > | Max Rows; [lOOO 

Roleld RoleName 

* T NULL NULL 


n & 


Seeding Membership:- 

Now, in this section we need to see the 
way that how could we populate data in 
the Users and Roles table. So, basically 
having a database with users and roles 
predefined in the database is good 
during development. Now, there are 
several ways which you can use to insert 




data into these tables like you could 
write simple SQL statements to insert 
records into these tables. But, we will 
be using membership API here to 
populate these data. So, now I am going 
to seed these data by writing a new 
method in the “Configuration class ” as 
shown below:- 



using System. Web. Security; 


namespace MovieReview. Migrations 
{ 


using MovieReview. Models; 
using System; 

using System . Collections . Generic; 
using System. Data . Entity; 
using System. Data . Entity .Migrations; 
using System. Linq; 
using WebMatrix.WebData; 


internal sealed class 

Conf igu ration :DbMigrat ionsConf igurat ion<MovieReview. Models .MovieDb> 

{ 

public Configuration ) 

{ 

AutomaticMigrationsEnabled = true; 

} 


protected override void Seed(MovieReview. Models .MovieDb context) 

{ 


// This method will be called after migrating to the latest version. 


context .Movies .AddOrUpdate(r => r. MovieName, 

new Movie { MovieName = "Avatar", DirectorName = "Dames Cameron", 
ReleaseYear = "2009" }, 

new Movie { MovieName = "Titanic", DirectorName = "Dames Cameron", 
ReleaseYear = "1997" }, 

new Movie { MovieName = "Die Another Day", DirectorName = "Lee 
Tamahori", ReleaseYear = "2002" }, 

new Movie 

{ 

MovieName = "Godzilla", 

DirectorName = "Gareth Edwards", 

ReleaseYear = "2014", 
reviews = new List<MovieReviews>{ 
new 

MovieReviews{ReviewerRating=5,ReviewerComments="Excellent",ReviewerName=" Rahul 
Sahay"} 

> 

}); 

for (int i = 0; i < 100; i++) 

{ 

context. Movies. AddOrUpdate(m => m. MovieName, 

new Movie { MovieName = "Anony_Movie_" + i.ToString( ), 
DirectorName = "Anony_Director_" + i.ToString( ), ReleaseYear = "2014" }); 

> 

SeedUsersAndRoles( ); 

> 

private void SeedUsersAndRoles( ) 

{ 

WebSecurity . InitializeDatabaseConnection("DefaultConnection", 
"UserProfile", "Userid", "UserName", autoCreateTables : true); 

var roles = (SimpleRoleProvider) Roles .Provider; 

var membership = (SimpleMembershipProvider) Membership. Provider; 

//Apply all combinations 

if ( ! roles . RoleExists( "Admin" ) ) 

{ 

roles . CreateRole( "Admin" ) ; 

> 

if (membership. GetUser("rahulsahay", false) == null) 

{ 

membership .CreateUserAndAc count ("rahulsahay", "password" ); 

> 


if ( ! roles. GetRolesForUser("rahulsahay" ) .Contains( "Admin”)) 

{ 

roles . AddUsersToRoles( new []{"rahulsahay"}, new []{ "Admin" }) ; 

} 

} 

} 

} 

So, as you can see here, that it uses the 
call for 

“ WebSecurity. InitializeDatabaseConne 
just to make sure that everything is setup 
and schema is in place. Then, once the 
database is setup I can walk through 
Current Role provider and Current 
Membership provider by using the 
property provider on the roles class and 
the membership class. So, now I have 
access to two objects that I can use to 
create users or if user exists then see 
which role that user is in. and then 
below is few permutation and 


combination which we could use. 


So, the 1 st thing is checking if there is a 
role called “Admin” if not then create 
one for me. 2 nd thing checking that is 
there any user with the name 
“rahulsahay ” , if not then create one 
with the same name and password. And 
the last one is checking if the user 
“ rahulsahay ” is in admin role; if not 
then assign this role to the user. So, it's 
always a good idea to check whether the 
things exist before just directly inserting 
because seed method runs always 
whenever we update the database from 
the package manager console. 

Now, with this code in place, I can go 



ahead and run the update command 
(Update-Database -Verbose) from the 
package manager console as shown 
below:- 



So, as you can see in the above screen 
shot it threw me an error. Since, here we 
are running update database part of EF 
Migrations, hence it requires little bit of 
configuration in the “ web.config ” file to 
work. So, we need to add below snippet 
in the “ system.web ” section. 


<roleManager enabled=”true“ defaultProvider=“simple"> 

<providers> 

<clear/> 

odd name=”simple" type=”WebMatrix.WebData.SimpleRoleProvider,WebMatrix.WebData" /> 
</providers> 

</roleManager> 

<membership defaultProvider=”simple"> 

<providers> 

<clear/> 

odd name=”simple” type=”WebMatrix.WebData.SimpleMembershipProvider J WebMatrix.WebData" /> 
</providers> 

</roembership> 

</system.web> 


Now, with the above piece of code in 
place, we should be able to run this 
update command from the package 
manager console. 



Now, let's verify whether the data has 
been migrated successfully or not. So, 
now, when I open the “roles” and 
“userlnRoles” table, I can see below 


results 


Server Explorer w ? X | 

» H = Q V fa 

4 yi Data Connections 

■a fed DefaultConnection (MovieReview) 

^ ■ Tables 

> H MovieReviews 
I> g| Movies 
|> H UserProfile 
|> §5 webpages_Membership 

> B webpages_OAuthMembership 

1 webpages_UsersInRoles 


dbo.webpages_Roles [Data] -o X Web.config 


a 


Max Rows: 1000 


_ 1 

J NULL 


Admin 

NULL 


Server Explorer 


q •= q* I lv 

a yi Data Connections 

^ fed DefaultConnection (MovieReview) 

■a Mi Tables 

t> |§ MovieReviews 

> H Movies 

> §i UserProfile 

0 S5 webpages_Membership 
t> webpages_OAuthMembership 
t> El webpages_Roles 
|> H webpagesJJsersInRoles 


dbo.webpages_Users!nRoles [Data] 
C3 % Max Rows: 1 1000 
Userid Roleld 

► i I 

* NULL NULL 


Web.config 


U O' 3 


Now, let's remove the authorize attribute 
from the home controller and put the 
same before Create Movie Action. So, 





now I want only authenticated users in 
admin role should be able to create new 
movie in the database. So, with the 
below piece of code, I should be able to 
achieve the same. 



// GET: /Movies/Create 

[Authorize(Roles = "Admin")] 
public ActionResult Create() 

{ 

return View(); 

} 

II 

// POST : /Movies/Create 
[HttpPost] 

[Authorize(Roles = "Admin")] 

[ValidateAntiForgeryToken] 

public ActionResult Create(Movie movie) 

{ 

if (ModelState.IsValid) 

{ 

db. Movies . Add(movie); 

db.SaveChanges( ); 

return RedirectToAction( "Index" ); 

} 

return View(movie); 

> 


Now, I would also need to do one thing, 
like I don't want to show “ Create New ” 
link to the users who are not admin. So, 
to do the same, we need to change the 
code in Index view for movie as shown 
below:- 

<p> 

@if (User.IsInRole("Admin")) { 
@Htrrl.ActionLink( "Create New", "Create") 
> 

</p> 


Now, with the above piece of code in 
place I should be able to go and test my 
application. So, just build the app once 
and refresh the page. 

Now, when I click on movies link, it 
will display me the below result. 


Notice, there is no “ Create New ” link 
there as I haven't logged in yet. 



Now, when I login and then try to 
navigate to this page, I should be able to 
see the “ Create New ” link and create the 
movie as well. 







And now, when I try to create new 
movie I should be able to create the 
movie as well as shown below. 


Select One Home About Contact Movies rahuisahay Logoff 

Create 

Movie 

MovieName 








Anony_Movie_96Anony_Director_962014 Edit | Details | Reviews | Delete 

Anony_Movie_97Anony_Director_972014 Edit | Details | Reviews | Delete 

Anony_Movie_98Anony_Director_982014 Edit | Details | Reviews | Delete 

Anony_Movie_99Anony_Director_992014 Edit | Details | Reviews | Delete 

test test 2014 Edit | Details | Reviews | Delete 


Cross Site Vulnerability: - 

Now, in this section we will discuss 
some of the most common attacks tried 
by the hackers and that is known as 
“ Cross Site Request Forgery ” also 
known as “ CSRF\ CSRF is basically 
an attack that a malicious user can 
attempt against your site to get the admin 
access or to delete the data or damage 
the data. Now, let me explain the same 
by giving a short example using our 
application. Let's suppose that I am 


malicious user and I don't have admin 
access and I want to create a movie in 
the site. So, what I would do. I would go 
ahead and make a replica of your 
application by just creating a simple 
HTML page and I would get these 
HTML Tags and associated values from 
the source code of the actual rendered 
page. Let me demonstrate that:- 


J lcxalhostl03VMo/io5/Lrca:e 


Select One Hdi 

ne About Contact Movi. 


Create 

Movie 




So, as an admin user I would like to 




navigate to this page, to create a new 
movie. But malicious user can't do that. 
So, he will design exactly the same page 
by keeping the same look and feel. Now, 
let me open a new Visual Studio project 
and create one empty project for the 
same. 



Then I'll add a new Item just a regular 
HTML page as shown below. Now, in 
order to design similar kind of page, I 
would just know little bit of the HTML 


that how the application looks like and 
based on that I would design the HTML. 
But, basically am interested inside the 
form tag which is getting generated when 
the actual page get rendered. 


< IDOCTYPE html> 

< html xmlns=" http : / / www . w3 . org/1999/ xhtml " > 

<head> 

<title></title> 

</head> 

<body> 

<form id="myForm" 

style="display : none"action="http : //localhost : 1034/Movies/Create" method="post" > 

<input class="text-box single-line" id="MovieName" name="MovieName" type="text" 
value="Hacked :)" /> 

cinput class="text-box single-line"id="DirectorName" name="DirectorName" 
type="text" value="Hacked :)" /> 

<input class="text-box single-line" id="ReleaseYear" name="ReleaseYear" 
type="text" value="Hacked :)" /> 


</form> 

<script type="text/javascript"> 

setTimeout(function( ) { window. myForm. submit( ); } } 3000); 
</script> 

</body> 

</html> 


So, if you see the html page, this is quite 


simple page, having three input tags with 
my dummy values inside and one point 
to notice here is the action item. If you 
notice the action item it is just 
redirecting you to the original site page, 
so actually it will take these inputs and 
submit in your application. Also, I have 
added one script there which will just 
automatically submit this form after 
3000 millisecond delay. 

Now, if simply open this html page by 
just right-clicking and view the same in 
browser, the form will automatically get 
submitted to my site and hence log in 
page just popped up. 




Open 

Open With... 


1 

View Markup 


J 55 

View in Browser (Google Chrome) 

Ctrl+Shift+W 


View in Page Inspector 

Ctrl+K, Ctrl+G 


Browse With... 



Set As Start Page 



Scope to This 


Ef 

New Solution Explorer View 


St 

Show on Code Map 



Exclude From Project 


St 

Cut 

Ctrl+X 

a 1 

Copy 

Ctrl+C 

X 

Delete 

Del 

fcl 

Rename 



Find Code Issues 



Find Symbols External to Scope 



Refactor 

► 


Cleanup Code... 

Ctrl+E, Ctrl+C 


Find Usages 


► 

Run Unit Tests 

Ctrl+U, R 

1 # 

Debug Unit Tests 

Ctrl-. U, D 

LI 

Properties 

Alt+ Enter 


plePage.html 


config 


Then, it will produce me the below 



output. 


*- e Id l oca lhost:10J4 /Movies/Crea:e 

Server Error in '/' Application. 


The required anti- forgery form field " RequestVerificationToken" is not present. 



It happened because in my create action 
I already enabled to prevent this action 

“[ValidateAntiForgeryToken]”. Now, if 
remove this action filter and try the same 
again, then it will produce me a different 
picture. Let me show you that as well. 



So, as you can see in the above screen 




shot that malicious user injected his 
values inside the application. So, it 
happened because I as admin already 
logged in and hence it considered my 
browsing session and posted these 
values in my application. So, in actual 
scenario, what malicious user will do 
copy my newly hosted link and email to 
different admin users, who just clicked 
link by thinking some valuable page and 
if at that time he already has the session 
opened in a different window, then it 
will post the malicious data into the 
application. So, in order to prevent these 
kind of scenarios we can put the same 
attribute “ [Validate AntiF orgeryToken] ” 
before the action method. So, with this 
attribute in place, it will restrict any 


CSRF activities as we seen above. 

[HttpPost] 

[Authorize(Roles = "Admin")] 

[ValidateAntiForgeryToken] 

public ActionResult Create(Movie movie) 

{ 

if (ModelState.IsValid) 

{ 

db. Movies .Add (movie ); 

db.SaveChanges( ); 

return RedirectToAction( "Index") 

> 

return View(movie); 

} 


Openld and OAuth:- 


Now, let's discuss another type of 
authentication which is very popular in 


today's era that is “ Openld and 
OAuth These two technologies let 
your users authenticate themselves 
without you managing the passwords. 
This is very beneficial and efficient. 
Like people who already have some 
accounts resisted with some of the 
popular sites like Google, Microsoft, 
Facebook etc, then user doesn't have to 
get registered themselves with your 
membership site. Rather they can get 
authenticated themselves by any of these 
third party site and land in your 
application. MVC 4 and above has this 
built in support for Open Id and OAuth. 
Now, in order to learn more about these 
two technologies you can either refer 
t http://openid.net/ . http://oauth.net/ ). 


Here in our application it's very easy to 
enable these settings. So, inside this 
project we can see in the global. asax 
file, there is a call for 
“AuthConfig.RegisterAuthO which 
lands you in App_Start folder in 
“ AuthConfig.es ” file. 


using System; 

using System. Collections .Generic; 

using System. Linq; 

using System. Text; 

using Microsoft .Web. WebPages .OAuth; 

using MovieReview. Models; 

namespace MovieReview 

{ 

public static class AuthConfig 

{ 

public static void RegisterAuth( ) 

{ 

// To let users of this site log in using their accounts from other 
sites such as Microsoft, Facebook, and Twitter, 

// you must update this site. For more information visit 
http : //go . microsoft . com/ fwlink/ ? LinkID=252166 

//OAuthWebSecurity.RegisterMicrosoftClient( 

// clientld: 

// clientSecret: ""); 

//OAuthWebSecurity.RegisterTwitterClient( 

// consumerKey: 

// consumerSecret : 

//OAuthWebSecurity . RegisterFacebookClient( 

// appld: 

// appSecret: ""); 

/ /OAuthWebSecurity . RegisterGoogleClient ( ) ; 

> 

} 

> 

Now, if you see the above code, currenty 
all the settings are commented. But, we 
could go ahead and enable all the 


settings. If you notice closely, you will 
come to know that all of these settings 
except last one which is for google, 
require Id and Secret key So, for 
getting that you need to register your site 
with their site and they will issue an Id 
and key for the same. But, for 
demonstration perspective google client 
is ok for me. So, just I need to 
uncomment the last setting, build the 
application and then refresh the login 
page as shown below. 



Use another service to log in. 

Log in using another service 


•Googte 


Now, when you click the Google link as 
shown above in the screen shot, it will 
take you the google link for 
authentication. 



One account. All of Google. 

Sign in to continue to Gmail 


Email 


Password 


Sign in 


W Stay signed in 


Need help? 


Now, here when login with your user 
name and password it will take you to 
our application after successful 




authentication. 



Search by Movie Name 



Name - Godzilla 

Director - Gareth Edwards 



Summary:- 

So, in this chapter we have seen security 
aspects involved in our MVC 
application. We see how to use 
Windows Authentication, Forms 
Authentication. We also saw how to set 
up roles and membership and take 






ownership of some important tables like 
User Profile table. We have also seen 
Web Security methods in action. We also 
covered that how to prevent CSRF 
attacks if attempted. And last but not the 
least we have seen another kind of 
authentication that is Openld and OAuth. 



Chapter 8: 
Caching - 
ASP.Net 
Terminology 

WHAT DO you find in 
this CHAPTER? 


=> Introduction 


=> Caching 
=> Cache Profiles 
=> Localization 
=> Resource Files 
=> Diagnostics 
=> ELM AH 
=> Summary 


Introduction:- 


Hi, folks. I hope you guys have been 


enjoying the journey to learn MVC by 
doing End to End Development. Now, in 
this chapter we are going to focus on the 
common routines of ASP.NET 
Framework. Here, in this case we will 
be focusing some of the most common 
ASP.NET techniques like Caching to 
improve the performance of the 
application, Localization techniques to 
implement Globalization and 
Localization in the application and 
digging inside the application by using 
some Diagnostics settings. 


Caching:- 


Now, in this section we'll begin our 


discussion with “ [OutputCache]” action 
filter. So, Output caching basically 
allows you to store the output of a 
particular controller in memory So, 
after that any future request coming for 
the same action in that controller will be 
returned from the cached result. Hence, 
in this case it avoids executing any of the 
code inside the action. So, now since we 
are executing less code and performing 
fewer actions, hence it improves the 
performance of the website dramatically. 
However, caching is easy to enable by 
using ‘ 7 OutputCach ef ’ filter, but you 
have to very careful when and where 
caching should be applied. Because, in 
many cases it may return you erroneous 
output and I'll explain those scenarios in 



some time. Now, while using caching, 
variety of options you could specify in 
there like “ Duration ”, “ Vary By Par am” 
etc. so, if you are familiar with 
ASP.NET Caching, then these terms 
won't be new for you. Now, let me 
explain the same with an example. 


[OutputCache(Dunation = 60)] 

public ActionResult Index(string SearchQuery = null,int page=l) 

{ 


var model = _movieDb .Movies 

.OrderByDescending(m => m. reviews. Count()) 

. Where (m=>SearchQuery==null | | m.MovieName. Start sWith( SearchQuery) ) 
. Select (m => new MovieViewModel 
{ 

Id = m.Id, 

MovieName = m.MovieName, 

DirectorName = m.DirectorName, 

ReleaseYear = m. ReleaseYear, 

NoOf Reviews = m. reviews. Count() 

}) .ToPagedList(page, 10); 
if (Request. IsAjaxRequest()) 

{ 

return PartialView( "_movies" , model); 

> 

return View(model); 


} 


Now, if you can see in the above snippet 
I have added “ OutputCache ” attribute 
on the index action of the controller. 
Since this is the home page of the 
application; hence, it receive highest 
traffic. So, it would be good idea to 
implement caching here to boost the 
performance. Now, in order to explain, I 
run the same in the debug mode, so what 
will happen here; at the 1 st load, it will 
come inside the action and execute all 
the code written and then returns the 
result, then in the 2 nd consecutive pass, 
results will get loaded from the cache 
and hence, it won't the hit controller's 
index action under that duration. 



[OutputCache(Duration = 60)] 

1 reference I O 0/1 passing 

public ActionResult Index(string SeaTxhQuery = null,int page=l) 


> 




_movieDb. Movies 

•OrderByDescending(m => m.reviews.Count()) 

•Where(m => SearchQuery == null | | m.MovieName.StartsWith(SearchQuery)) 
. Select (m => new MovieViewModel 
{ 

Id = m.Id, 


MovieName = m.MovieName, 
DirectorNarae = m.DirectorName, 
ReleaseYear = m.ReleaseYear, 
NoOf Re views = m. r eviews. Count () 
}).ToPagedList(page,10); 
if (Request. IsAjaxRequest()) 

{ 


return PartialView(" movies ", model); 


> 

return View (model) ; 


3 |ocalhost:l(J34 



Now, notice, I have the debugger on, but 
when I refresh the page, it won't hit the 
break point. So, it loaded the results 





from the cache itself. So, for 60 seconds 
what I have specified in the parameter, it 
won't load the content from the server. 
Now, in addition of duration, there are 
other settings which you can also set 
here. So, please note that these settings 
are inherited from ASP.Net Caching, so 
it's not exclusive for MVC framework. 
Now, one of the very famous settings is 
“VaryByParam” . So, it can be defined 
three ways as shown below:- 

Vary by means to cache for every 
set of parameters.- Now, this is the 
setting which is normally used because 
you don't want to return the same cached 
response for different parameters like 
query strings. 



Vary by “none” to always cache the 
same content. 


Vary by “name” to cache for every 
value passed in the parameter. Now, 
here what you can do; you can pass 
multiple parameters separated by 
semicolon. 

So, let's suppose if I say vary by param 
for my “ SearchFilter ” and then do a 
search with the value “Avatar”; then it 

will be saved as 1 st search result in 
cache and then then do a search with 
“ Titanic ” will be saved as 2 nd cached 
result. So, for every different name it 
will save a different cache result. And, 
then if user searches “ Titanic ” again, 



then it will be returned from the cached 
result, it won't come from the server. 

Now, apart from these, we can also set 
“ Location ” like Cache on Server, 

Client or Client and Server. So, the 
default value in this case is anywhere 
means it will cache on the server or on 
the client. However, we can be specific 
with cache locations saying that it should 
be only stored on the server or on the 
client or on the proxy servers. 

We can also specify “ VaryByHeader” . 
So, this setting allows you to vary the 
cache based on specific HTTP Header 
like “Accept-Language” . It means we 
wouldn't want to return a response in 



Spanish if it is being requested in 
English. 

Then we have “ Vary By Custom ” . Now, 
this setting will override a method 
inside “ global.asax ” file. So, inside 
here we can build our own custom 
caching mechanism telling ASP.Net what 
to cache. 

Last but not the least is setting up 
“SqlDependency ” . So, basically a SQL 
Dependency tells that it cache responses 
until the data inside the SQL table 
changes. Now, all these settings are 
greatly explained in MSDN 
t http://msdn. microsoft.com/enus/library/ 1 
So, you can do deep dive for this topic 


by referring the article on MSDN. 
However, I'll do a demo on some of 
these topics which you will need or 
using most of the time. Now, the snippet 
which I have shown earlier won't work 
with paging because in there I have the 
parameter set as “int page=l”. So, for 
every different page, it will hit the 
server, and then pull the details from the 
server. So, if you go back to page no. 
which you have searched then, it will not 
hit the index action. Now, let's suppose 
you have bookmarked few links and 
searching the same like 
http://localhost:l 034/? 

Search Query=godzilla . and then in that 
case also “ VaryByParam ” will work 
well. So, here the parameter is 


“ SearchQuery ”. 

Now, let's suppose we would like to set 
caching location. Now, to do the same I 
need to bring in the namespace 
“System. Web. UF\ So, below is the 
snippet which is telling that I have set 
the Cache Location on the server. 


[OutputCache(Duration = 60, Location = OutputCacheLocation.Server)] 

public ActionResult Index(string SearchQuery = null,int page=l) 

{ 


var model = _movieDb. Movies 

.OrderByDescending(m => m. reviews .Count( ) ) 

. Where (m=>SearchQuery==null | | m.MovieName.StartsWith( SearchQuery) ) 
. Select (m => new MovieViewModel 
{ 

Id = m.Id, 

MovieName = m.MovieName, 

DirectorName = m.DirectorName, 

ReleaseYear = m. ReleaseYear, 

NoOf Reviews = m. reviews .Count ( ) 

}) .ToPagedList(page, 10); 
if (Request. IsAjaxRequest()) 

{ 

return PartialView( "_movies", model); 

> 

return View(model); 


> 


So, here ASP.Net will send instructions 
to the browser that response won't be 
cached in client location. So, for the 
response, browser will always have to 
come back to server and then check. 
Now, from the server side, ASP.Net will 
just return the response from memory if 
it has cached response. So, visually it 
doesn't make any changes means you 
won't realize any changes to the 
application, but only the storing 
mechanism now changed as server only. 


Cache Profiles 

Now, associated to these setting there is 
one more concept called 


“ CacheProfiles ”. Let's suppose a 
scenario, that you have multiple pages in 
your application and each page you have 
set certain duration, but during the 
course of development, or might be in 
production, you want to increase or 
decrease the cache duration, then in that 
case it would be difficult to go ahead 
one by one in all the pages and change 
the duration. So, in order to overcome 
this scenario, ASP.Net has provided us 
“CachePro files” setting. 

Cache profile setting can be done from 
“ web.config ” file. So, here we can have 
different profiles with different 
durations. So, on each of the controller's 
action, rather than specifying duration 



we can specify profiles. So, idea behind 
this, this can be administered from the 
web.config file. So, below is the setting 
which you can specify in the web.config 
file under “ <system.web > ” section. 

<caching> 

<outputCacheSettings> 

<outputCacheProfiles> 

<add narre="Long" duration="260"/> 
<add name="Mild" duration="100"/> 
<add narre= M Short M duration="60"/> 
</outputCacheProfiles> 
</outputCacheSettings> 

</caching> 


Now, from the controller side, you just 
need to specify like shown below. So, 
with the below piece of code in place, 
now it will load the duration what we 


have specified in the web.config file. 
So, going ahead if you ever want to 
increase/de crease the time, you won't 
have to compile the solution again. 


[OutputCache(CacheProfile = "Mild", Location = OutputCacheLocation . Server)] 
public ActionResult Index(string SearchQuery = null,int page=l) 

{ 


var model = _movieDb .Movies 

.OrderByDescending(m => m.reviews.Count()) 

. Where (m=>SearchQuery==null | | m.MovieName. Start sWith( SearchQuery) ) 
. Select (m => new MovieViewModel 
{ 

Id = m.Id, 

MovieName = m.MovieName, 

DirectorName = m.DirectorName, 

ReleaseYear = m. ReleaseYear, 

NoOf Reviews = m. reviews .Count ( ) 

}) .ToPagedList(page, 10); 
if (Request . IsAjaxRequest() ) 

{ 

return PartialView( "_movies", model); 

} 

return View(model); 


} 


<system.web> 

{compilation debug=”true” targetFramework="4.5” /> 
<httpRuntime targetFramework=”4.5" /> 

{authentication »ode=” Forms" > 

{forms loginUrl="~/Account/Login" timeout="2880" /> 
{/authentication> 

{caching) 

{outputCacheSettings > 


coutputCacheProfiles) 

{add name="Long" duration=”260” /> 


{add name=”Mild" duration=" 100 "/ 

A lockElements 

{add name=”Short” duration=”60"/ 

A lockltem 

{/outputCacheProfiles) 


{/outputCacheSettings) 

A noStore 

{/caching) 

A sqlDependency 

{pages) 

A varyByContentEncoding 

{namespaces) 

A vaiyByControl 

]< 

A varyByCustom 

Isl Output Code Coverage Results 

A varyByHeader 


A varyByParam 



Also apart from Cache profiles, there is 
variety of settings which you can manage 
from the web.config file as shown above 
in the screen shot. 


Localization:- 

Now, the next topic which I would like 
to talk about is Localization. So, in this 


case we'll see that how to localize the 
application. So, based on different 
cultures, application decides this 
localization behavior. So, there is 
couple of settings which decides this. 
Now, the first setting is 
“Thread.CurrentCulture” property. So, 
this property decided how to format the 
strings. For example, currency; means is 
it going to be rendered as Rs, Dollar or 
Euro, similarly based on this setting 
Time format for that particular zone is 
also decided. Another setting is 
“Thread.CurrentUICulture”. So, this 
setting decides how the run time loads 
the resource. So, obviously these 
settings can be set via our own custom 
code like let user choose what language 



they are interested in from the drop 
down. So, this is the manual case. Or, 
this can be done automatically as well. 

In this case we let ASP.NET handle this 
for me. In this case, ASP.Net can set 
cultures based on the HTTP Headers 
value, like “Accept- Language”. Now, in 
order to make this automatic, we need to 
add one “globalization” section in the 
web.config file as shown below. 

<globalization culture="auto" uiCultune="auto''/> 


Here, you could see that I have set the 
“ Culture ” and “ UlCulture ” to auto. 
Now, let me do little demo with my 
application to explain the same. 


@{ 

var amnt = 15.0m; 

var localDate = new DateTime(2014, 6, 4); 

i 

<div> 

@amnt . ToString( ”c" ) ; 

@localDate . ToLocalT ime( ) ; 

</div> 


So, as you can see above, I have added a 
code block in which I have added an 
“c mint ” variable which is taking 
decimal value and date in our regular 
format. Next, below in the div section I 
am outputting the same. So, in the div, 
you notice that am outputting the value as 
“c” parameter, which means please take 
this input and format the same as 


currency and then I am outputting the 
local time. Now, with the above change 
in place, when I save and refresh, then it 
will print the below output. 



Now, since my default culture in here in 
this machine is set to “ United States ”, 
hence it produced me the “5” symbol 
and then the local time. Now, from the IE 
settings, I can go ahead and change the 
language settings as shown below:- 






Now, click on the language setting and 
add new language there and move the 
same up as shown below. 



Language Preference 




Language Preference 

Add the languages you use to read websites, listing in order of 
preference. Only add the ones you need, as some characters can 
be used to impersonate websites in other languages. 


Language: 



Prefix and suffix options 

d Do not add 'www' to the beginning of typed web addresses 

Specify the suffix (for example .net) that should be added to 
typed web addresses when you press Ctrl + Shift + Enter. 

Suffix: 


OK 


Cancel 


Now, with the above setting in place 
when I refresh the page then it will 



produce the below output in Indian 
format. 



Now, as far as localization is concerned, 
we are only half way done. We need to 
also see how we can change string 
literals like suppose if I have selected 
some language like “ French ” language, 
then in that case my string literals should 
also get translated into that locale. So, to 
localize the text I need to rely on the 
resource file or files ending with resx ” 



extension. 


Resource Files:- 

So, basically these resource files are 
xml files which stores localized strings 
for a specific culture. So, what I'll be 
doing here, I'll be creating two resource 
files; one is for our language “ English ” 
and another for other language 
“French”. So, two files with the names 
“ Resour ce.resx” and 
“ Resour ce.fr. resx” are for English and 
French. So, this is the general naming 
convention for different resources. Now, 
in ASP.Net, we have resource manager 
which loads the associated resource file 


for the current UI culture which is set. 
Now, these actions are backend actions, 
we generally don't have to interact with 
resource files directly, Visual Studio 
takes care of this by compiling the same 
for us in a strongly typed class. Now, let 
me explain the same with a small demo. 

So, I am just going to output “Hello” on 
the screen in English version and French 
Version. Now for creating resource file, 
we can create the same inside the same 
project or in a different class library 
project for making clean and extendable. 
So, decision is completely on you how 
do you like to create. But, for demo 
purpose, I would like to create the same 
in the same project. So, here I'll be 



adding the same in Home Views folder 
as shown below. 




Now, when you open the file in Visual 
Studio, the very 1 st thing which might 
want to change is the access modifier. 

By default it would be internal, which I 
would change it Public. So, this is one of 
the required things for compilation to 
happen smoothly. As we know that 
Razor Views are compiled in a different 
assembly basically a different file which 
is not in the scope of our project. So, in 
order to make these resources available 
in our razor views we have to make 
Access Modifier for these resources as 
Public. 

Now, as you can see in the above screen 
shot, visual studio has also generated 
one class file “ Resource.Designer.es ” 



for us. We'll see the same in a bit. But, 

1 st set the strings which we want to 
reach from the view. So, in the below 
screen shot, I have set the value and then 
save the same. Once, I saved this file, 
you could see in the class file, it 
generated one property with the name 
“ Greet ” in the class file. So, now this is 
strongly typed and will be easily 
available from the view to load the 
specific resource. 


Ill Overrides the current thread's CurrentUICulture property for all 
III resource lookups using this strongly typed resource class. 

[global: :System.ComponentModel. Edi~o'3''owsableAttribute(global: :System.ComponentModel. Edit: rBrowsableState .Advanced)] 

public static global: :System. Globalization. Cult: *elnfc Culture { 

get { 

return resourceCulture; 



resourceCulture ■ value; 

> 

} 


III Looks up a localized string similar to Hello. 

/// </summary> 

public static string Greet { 
get { 

return ResourceManager.GetString("Greet", resourceCulture); 

> 

i 


So, now what I do now, I would replace 
my hard coded text with the namespace, 
class name and then the property name 
which I am interested in as shown 
below. 


} 


var amnt = 15.0m; 

var localDate = new DateTime(2014j 6, 4); 


<div> 

(SIMovieReview . Views . Home . Resource . Greet 

<br/ > 

@amnt . ToString( "c" ) ; 

(SIlocalDate . ToLocalTime( ) ; 

</div> 



So, now if at this point if I run the 





application, then it will display the 
message from the Resource file “Hello” 
irrespective of what language I have 
chosen. Because currently I have only 
one resource file and that will be treated 
as a base resource file. Now, if I want to 
customize the same for a different 
language, I need to create another 
resource file for a different language. 



Now, all of these resource file will get 
embedded in the base resource file. So, 


when you see the Resource file property, 
you will see that build action is 
“ Embedded Resource ” as shown below 
in the screen shot. 


Properties 

▼ -13 X 

Resource.resx File Properties 

▼ 


D != n I 
c=. z* 


□ I Advanced 

Browse to URL 

Build Action Embedded Resource 

Copy to Output Directo Do not copy 
Custom Tool PublicResXFileCodeGenerat 

Custom Tool Namespa 

□ Misc 


File Name Resource.resx 

Full Path C:\Rahul\Books\MVC 4\Mo 


Now, let's run the application by setting 



the 1 st language as French from the IE 
language setting. 


Language Preference 


Language Preference 

Add the languages you use to read websites, listing in order of 
preference. Only add the ones you need, as some characters can 
be used to impersonate websites in other languages. 


Language: 



[ Move up 

English (India) [en-IN] 

English (United States) [en-US] 

Move down 

Remove 

Add... 


Prefix and suffix options 

[H Do not add 'www' to the beginning of typed web addresses 

Specify the suffix (for example .net) that should be added to 
typed web addresses when you press Ctrl + Shift + Enter. 

Suffix: 


OK 


Cancel 



So, it worked. It gave me hello in French 
version; it also produced the euro 
symbol there. So, now these settings I 
can do from the controller action as 
well. Now, there could be chances that 
caching might interfere here, even if I set 
the language back to any other format. 

So, in order to fix this, we could pass 
“Accept- Language” from the index 
action itself as shown below. 





[OutputCache(CacheProfile="Mild", Location=OutputCacheLocation.Server,VaryByHeader 
= "Accept- Language")] 

public ActionResult Index( string SearchQuery = null,int page=l) 

{ 


var model = _movieDb. Movies 

.OrderByDescending(m => m. reviews. Count()) 
Where(m=>SearchQuery==null | | m.MovieName . StartsWith(SearchQuery) ) 
. Select (m => new MovieViewModel 
{ 

Id = m.Id, 

MovieName = m.MovieName, 

DirectorName = m.DirectorName, 

ReleaseYear = m. ReleaseYear, 

NoOf Reviews = m. reviews. Count () 

}) .ToPagedList(page, 10); 
if (Request. IsAjaxRequest()) 

{ 

return PartialView( "_movies", model); 

> 

return View( model); 

> 

So, here I am telling the ASP.Net, clear 
the cache based on the header as well 
and that is based on the language. So, 
now if you build the application and try 
even within the caching time with 
separate language, this will load 
properly. 


Diagnostics:- 


Now, in this section we'll see some of 
the Diagnostics feature. Well this is the 
feature which gives you impression that 
how your ASP.Net MVC application is 
working means how healthy the 
application is. Potentially, we use this 
feature to track page traffics also page 
performance or in a nutshell application 
performance. So, basically Diagnostic 
answers few of very obvious questions 
like When application started, When 
application crashed, When application 
aborted, Any exception encountered, 
Any authorization failure, And many 


more. 


So, to answer these kinds of questions 
we have number of options available. 
But, with ASP.NET, we have Health 
Monitoring System in place, which we 
can set from “web.config” file. Apart 
from this, there are also many third party 
tools to monitor the application, like 
“ Log4Net ” is popular open source 
software for logging, which you can use 
in your application. Another package, 
which I really like, is “ ELMAH”. 
ELMAH stands for “ Error Logging 
Modules And Handlers ”. So, it 
basically captures events about your 
application and stores the same at 
variety of locations like xml files, text 
files or databases. 



You can also share the results on social 
sites like Twitter. Let's see the same in 
action. So, the default ASP.Net 
configuration settings live in the 
“ web.config ” file. But, it's not the 
“ web.config ” file which sits in the root 
of your application. Now “ web.config ” 
file which applies configuration to every 
ASP.Net application which runs in your 
machine; it sits at the machine level. 
Now, in order to go this web.config file, 
we need to navigate to the following 
path 

“C: 1 Windows \Microsoft. NE 71 Framewt 
Now, it's pretty confusing with the 
Framework naming convention, although 
I amusing Framework 4.5, but still it 
lives in the Framework 4 folder, with the 



updates in place. Now, when you open, 
this folder, you can see web.config file 
as highlighted below in the screen shot. 


' - ' 

tfV, ys? 1. « Microsoft.NET ► Framework64 ► v4.030319 ► Config 


▼ I *f I I Search Config 

pi 


Organize » jJ Open 

» Bum New folder 



m - a © 

* Favorites 

Name 

Date modified 

Type Size 

ri 

K Desktop 

i. Browsers 

5/8/2014 10:38 AM 

File folder 


Downloads 

iH DefaultWsdIHelpGenerator 

3/18/2010 11:57 AM 

ASP.NET Server Pa... 

69 KB 

jg Recent Places 

1 i] legacy ,web_hightrust 

3/18/2010 4:32 PM 

CONFIG File 

13 KB 


| , legacy.web_hightrust.config. default 

3/18/2010 4:32 PM 

DEFAULT File 

13 KB 

S Libraries 

@1 legacy.webjowtrust 

3/18/2010 4:32 PM 

CONFIG File 

8 KB 

fll Documents 

; legacy.webJowtrust.config. default 

3/18/2010 4:32 PM 

DEFAULT File 

8 KB 

Music 

0 legacy.web.mediumtrust 

3/18/2010 4:32 PM 

CONFIG File 

12 KB = 

Q Pictures 

(”* 1 leqacv.web_mediumtrust.confiq.default 

3/18/2010 4:32 PM 

DEFAULT File 

12 KB 

H Videos 

0 legacy.web.minimaltrust 

3/18/2010 4:32 PM 

CONFIG File 

7 KB 


[ , legacy .web_minima!trust.config.default 

3/18/2010 4:32 PM 

DEFAULT File 

7 KB 

J* Rahul_Sahay WN7X64- 

0 machine 

3/19/2014 3:00 PM 

CONFIG File 

34 KB 


pi [Type CONFIG 1 

u Size 33.6 KB 

9/11/2013 4:43 PM 

DEFAULT Hie 

36 KB 

Network 

| Date modified: 3/19/2014 3:00 PM | 

3/18/2010 11:58 AM 

XML Document 

4 KB 


" NetFx45_DS_schema_update 

3/21/2013 5:24 PM 

XML Document 

3 KB 


| l! web 

5/25/2014 74)1 PM 

CONFIG Hie 

43 KB | 


u web.config.comments 

3/21/2013 5:24 PM 

COMMENTS File 

68 KB 


[_J web, config. default 

9/11/2013 5:20 PM 

DEFAULT Hie 

43 KB 


1*1 web_hightrust 

3/18/2010 4:32 PM 

CONFIG File 

11 KB 



3/18/7010 4-37 PM 

nFFAIIITFile 

n irn 


weh Date modified: S/75/701 4 7:01 PM Date Treated: 9/1 1 /701 3 S:?0 PM 


Now, this is the file which is 
responsible to apply settings to all 
ASP.Net Applications. Now, when I 
open the same in Visual Studio, I can 


search for the Setting 
‘ L H ealth Monitoring 1 ’ , and then it will 
give me the associated setting for the 
same as shown below. 


<healthMonitoring> 

<bufferModes> 

odd name="Critical Notification" maxBufferSize="100" maxFlushSize="20" 

urgent FlusHThresbold-"l" regularFlushInterval""Infinite" urgentFlushInterval-"00 : 01 : 00" 

maxBufferThreads="l" /> « 

odd narae='' Notification” max8ufferSize="300" maxFlushSize="20" 

urgentFlushThreshold*"l" reguIarF lushlnterval»"lnf inite" urgentFlushInterval»"00 : 01 : 00" 
maxBufferThreads="l" /> 

urgentFlushThreshold="100" regularFlushInterval°"00:05:00" g 

urgentFlushInterval="00:01:00" maxBufferThreads="l" /> 

regularFlushInterval="00 : 30 : 00" urgentFlushInter^al="00 : 05 : 00" 
maxBufferThreads»"l" /> 

</bufferModes> 

<providers> 

odd name="EventLogProvider" type="System. Web. Management. EventLogWebEventProvider, System. Web, Version=4. 0.0.0 
odd connectionStringName="LocalSqlServer" maxEventOetailsLength=”1073741823" 
buff er«“f alse” bufferMode»"Notification" na*e*"SqlWeb Event Provider" 

type="System. Web. Management. SqlWebEventProvider, System. Web, Version=4.0.0.0,Culture°neutral,PublicKeyTokei 
odd name="WmiWebEventProvider" type=”System. Web. Management. WmiWebEventProvider, System. Web, Ve 
</providers> 


<profiles> 


e=”Default" minlnstances»” 


^"Critical" minlnstances=' 


' maxLimit="Infinite" minlnterval="8i 
." maxLimit="Infinite" minlnterval=") 


</profiles> 


So, as you can see that there are many 
settings associated to Health Monitoring 
like Providers, which determines where 
you want to save the logs; one option 


could be in Event Logs which you 
could see from the settings or may be in 
SQL Server or may be in WMI Events. 
So, these are built in providers, but 
again you can add your custom providers 
here as well. Now, there is one more 
setting which describes the 
“ eventMappings ” of the application. So, 
it basically categorizes the same into 
different events as you can see below in 
the screen shot. 



dd n awe = “All Errors Default” 

profile="Default" minlnstances=" 

dd naae-“Failure Audits Default" eventflaae-" Failure Audits" 
provider="EventlogProvider" profile="Default" minlnstances=" 
max Limit -"Infinite" minlnterval="00:01:00" custom*"" /> 


entMappings> 

odd name="All Events" type=" System. Web .Management . WebBaseFvent, System .Web, Version-4 .0.0.0, Culture-neutral, Pi 
tEventCode="0" endEventCode="2X47483647" /> 
d name="Heartbeats" type*"Sy stem. Web. Management. WebHeartbeatEvent, System. Web, Version«4.0.0.0,Culture»neut" 
start EventCode="0" endEventCode="2147483647" /> 

d name="Application Lifetime Events" type="System. Web. Management. WebApplicationLifetimeEvent, System. Web, V* 
tEventCode="0" endEventCode="2147483647" /> 

e="Request Processing Events" type=”System. Web. Management. WebRequestEvent, System. Web, Version=4. 0.0.0 
tEventCode="0" endEventCode="2147483647" /> 
d name="All Errors" type="System.Web.Manageroent.WebBaseErrorEvent,System.Web,Version=4.0.0.0,Culture=neuti 
startEventCode="0” endEventCode="2147483647" /> 

■"Infrastructure Errors" type»"System. Web. Management. WebErrorEvent, System. Web, Version«4. 0.0.0, Cultui 


tEventCode= 


>" end£ventCode="2147483647" . 


■"Request Processing Errors" type="System.Web.Management.WebRequestErrorEvent,System.Web,Version=4.i 


startEventCode= 


)” endEventCode="2147483647" , 


■"Failure Audits" type*” System. Web. Management. WebFailureAuditEvent, System. W< 


startEventCode= 


•0" endEventCode="2147483647" 

Success Audits" type="Sy stem .Web . Management . WebSuccessAuditEvent, System . Wi 
” t" endEventCode="2147483647" /> 


', Version =4.0 


As you see in the screen shot, it is the 
rules section which is deciding where 
these events should go. Like it is saying 
that “All Errors ” should go to 
“EventLogProvider ” . Now, again you 
can setup your own rules. Let me explain 
the same by creating one exception in the 
application. So, in the home controller 
under the index action, I'll intentionally 


throw an exception as shown below. 


[OutputCache(CacheProf ile="Mild", Locations OutputCacheLocation.Server,VaryByHeader 
= "Accept-Language" ) ] 

public ActionResult Index(stning SearchQuery = null,int page=l) 

{ 

throw new Exception ("Log this Exception"); 
var model = _movieDb. Movies 

.OrderByDescending(m => m. reviews . Count ( ) ) 
.Where(m=>SearchQuery==null| |m.MovieName.StartsWith( SearchQuery) ) 
. Select (m => new MovieViewModel 
{ 

Id = m. Id, 

MovieName = m.MovieName, 

DirectorName = m.DirectorName, 

ReleaseYear = m. ReleaseYear, 

NoOf Reviews = m. reviews .Count () 

}) .ToPagedList(page, 10); 
if (Request . IsAjaxRequest( ) ) 

{ 

return PartialView( "_movies", model); 

} 

return View(model); 


So, now, when I build and refresh the 
page, this should give me an exception 
as shown below. 


Server Error in '/' Application. 


Log this Exception 










public ActionResult Index(string SearchQuery = n 

{ th E ti <"L th' E f ") 

var model = _movieDb. Movies 


Now let me go ahead the see the event 
logs whether it recorded the problem or 
not. So, for doing the same I'll type 
“ eventvwr ” in windows — > Search 
Program and Files section. Then, in that 
event viewer under the Windows “ Logs 
— > Application ”, you can find the error. 



Now, when you double click the 
Highlighted Warning, it will list you the 
detail for the error as shown below in 
the screen shot. 



So, this is fine. All these errors can be 
recorded in the events log. But 
sometimes it becomes quite tricky to 



drill down the error from the event logs. 
At that moment we need a “ WEB JJT ’ 
kind of interface which will list all these 
events, exceptions and everything 
related to application. So, for these 
cases, we might need ELMAH enabled 
in our application. So, to install the 
same; the easiest way is “ nuget package 
manager ” as shown below in the screen 
shot. 


ELMAH:- 


Search Results 


ElMAH 

lO ELMAH with initial configuration for getting started quickly. 
ELMAH (Error Logging Modules and Handlers) is an applicati... 



Elmah.ElasticSe 
■ 1 Elmah. ElasticSer 
ELMAH. 


ELMAH error logger for sending e 
package include initial configurat 


JSNLog.Elmah - JavaScript Logging for Elmah 

server side log. Installs JSNLog and configures it for us 
elmah. io core (no config) 

ELMAH error logger for sending errors to elmah.io. Th 
package does nc 


Id: Elmah.MVC 


Painless integration of ELMAH functionality 
into ASP.NET MVC Application. Just drop 
the package inside you ASP.NET MVC 
application and access /elmah URL. It will 
also install global HandleError filter, that 


(even if customerErro 


id "On"). 


Tags: ELMAH ASP.NET MVC error handling 
logging unhandled exception 
Dependencies: 

elmah.corelibraty (> 1.2.0 .1) 

Each item above may have sub- 
dependencies subject to additional license 


nclude any ELMAH configuration. Please i... 

1 2 3 4 5 * 


Now, once this is successfully installed, 
then I would just build the application 
once, just to make sure all required 
things are in place. Then I'll refresh the 
page again and it will show me the 
below error. One point of caution here, 
if this “ Elmah.MVC ” gives error like 
no dll is found after installation, then 



install the root ELMAH as well 1 st one 
from the list. 


Server Error in '/' Application. 




Then, you need to navigate to 
“ http .'//local host: 103 4/el mah ”. this 
will list the error in UI as shown below. 


Now, when you click on the details link 
in the Error section, then it will list all 


the details with the stack trace as shown 
below. So, this will help you to 
circumvent the problem 



Now, you can also set the settings, like 
whenever any error happens, and then it 
should send you an email. So, all these 
settings can be done from the web.config 
file under ELMAH settings as shown 
below. 


<configSections> 

<!-- For more information on Entity Framework configuration, visit http : //po ■ microsof t . com/fwlink/ ? LinkID=2374 
<section name="entityFramework" type="System. Data. Entity. Internal. ConfigFile.EntityFrameworkSection, EntityFrc 
CsectionGroup name=“elmah”> 

<section name=”security” requirePermission="false” type=”Elmah.SecuritySectionHandler, Elmah" /> 
csection name=“errorLog” requirePermission=”false” type="Elmah.ErrorLogSectionHandler, Elmah" /> 
csection name="errorMail" requirePermission="false“ type="Elmah.ErrorMailSectionHandler, Elmah" /> 

<section name="errorFilter“ requirePermission=”false" type="Elmah.ErrorFilterSectionHandler, Elmah" /> 
</sectionGroup></configSections> 

So, as you can see in the screen shot, 
there is variety of settings which you can 
administer from the web.config file in 
your application. Also, you could set 
that who is authorized to see these 
errors. Since I already have a setting for 
admin, so I can set that as well. I have 
also set requires Authentication to true, 
so that it will ask me to login before I 
can see the errors. 


<appSettings> 

odd key="webpages :Version" value="2. 0.0.0” /> 

odd key="webpages : Enabled" value="false" /> 

odd key="PreserveLoginUrl" value="true" /> 

odd key="ClientValidationEnabled" value="true" /> 

odd key="UnobtrusiveDavaScriptEnabled" value="true" /> 

odd key="elmah .mvc . disableHandler" value="false" /> 

odd key=”elmah .mvc . disableHandleErrorFilter" value="false" /> 

|<add key="elmah.mvc.requiresAuthentication" value="true" />| 

odd key="elmah.mvc.IgnoreDefaultRoute" value='‘false" /> 

| odd key="elmah.mvc . allowedRoles" value="Admin" /> 
odd key=”elirah.mvc.allcwedUsers" value="*" /> 
odd key="elmah .mvc . route" value="elmah" /> 

</appSettings>| 


So, with the above settings in place, 
when I refresh the application and 
navigate to ELMAH, it will bring me 
back to the login page and ask to login 
1 st . 


Cl localhost:1034/Account/Login?ReEurnUrl=%2fetmah 


Select One Home About Contact Movies o Login 

Log in. 

Use a local account to log in. 

Login Form 



Now, when I login, then it will show me 
the error page. 


Error Log for ROOT on WN7X64-1B3R5Z1 



So, this way we can configure User 
interface for Logging and Monitoring at 
application level with ease. 



Summary:- 


So, in this section, we have seen how to 
use Caching. What different settings we 
can use in caching to boost the site 
performance. We have also seen how to 
use localization based on our culture and 
UlCulture settings. In order to explain 
localization we have used different 
resource files with different locale 
values. Then, in the end we have seen 
how to use Diagnostics Settings. We 
have also seen Diagnostics at different 
level; at Event Viewer Level and at UI 
Level. We have implemented ELMAH to 
track the application at every instance. 


Chapter 9: Unit 
Testing 

WHAT DO you find in 
this CHAPTER? 


=> Introduction 


=> TDD 


Home Controller Tests 


=> Web Tests 
=> Load Tests 
=> Code Coverage 
=> Summary 


Introduction:- 

Hi Friends, so, we have now done with 
the development in this case study. Now, 
it's time to write Test cases. So, in this 
section, we'll see that how to use Test 
Driven Development to drive the 
design of a feature. We'll also discuss 


“TDD (Test Driven Development)” 

cycle. TDD Cycle comprise of three 
basic things. They are 

Red: - First you write failing test, which 
gives you red result. 

Green: - Second you write fulfilling the 
request; hence test passes and gives 
green result. 

Refactor: - Then we do refactoring to 
improve the design, especially 
reusability in this case. 

So, let's begin the chapter with TDD 
design. 



TDD:- 


TDD means Test Driven Development. 
So, as I started discussion on MVC, I 
emphasized on the topic, that whole idea 
of writing any MVC application is its 
TDD design. It enables user to write 
Test cases separately for any scenario. 
So, for this reason, we have created one 
test project along with our web project. 
So, we can go ahead and run the test 
cases from the menu as shown below in 
the screen shot. 

MovieReview - Microsoft Visual Studio 

FILE EDIT VIEW PROJECT BUILD DEBUG TEAM TOOLS TEST ARCHITECTURE RESHARPER ANALYZE WINDOW HELP 
| O - © I 0 ' U J* | - - ► Google Chrome - Cl Run M Selected Tests j 

Debug ► 'A All Tests Ctrl* R. A ■ 

Playlist ► Failed Tests 

Test Settings ► Not Run Tests 

Analyze Code Coverage ► Passed Tests 

Profile Test Repeat Last Run Ctrl+R, L 

Windows ► 




Now, when I ran the test, it produced me 
the below result. 


Test Explorer ? X 

[Jjz » Search fi " 

Q Streaming Video: Improving quality with uni w 
Run All I Run... » | Playlist : All Tests » 

* Failed Tests (1) 

O Index 1 sec 

^ Passed Tests (2) 

© About 105 ms 

© Contact 3 ms 


So, as you can see in the above screen 
shot, two test cases passed and one 
failed. The other two test cases passed 
because we haven't changed anything in 


these two actions, these are as it is as 
presented by Visual Studio. But, Index 
action we have changed completely. So, 
in order to fix the same we need to 
modify this Test case. Now, in order to 
see the exception, you need to click on 
the index action here in the Test 
Explorer. So, when you click on it will 
produce the below result. 



Test Explorer 

[[= ^ Search 


- ¥ X 

p- 


Q Streaming Video: Improving quality with unit tests and fakes 
Run All I Run... ^ I Playlist : All Tests ▼ 

^ Failed Tests (1) 



^ Passed Tests (2) 

O About 
© Contact 


105 ms 
3 ms 


Index 

Source: HomeControllerTest.es line 17 

O Test Failed - Index 

Message: Test method 

MovieReview.Tests.Controllers.HomeControllerTest.Index threw 
exception: 

SystemJnvalidOperationException: No connection string named 
’DefaultConnection' could be found in the application config file. 

Elapsed time: 1 sec 
^ StackTrace: 

LazyInternalConnection.get_ConnectionHasModelO 

LazylnternalContextinitializeContextO 

IntemalContextGetEntitySetAndBaseTypeForType(Type entityType) 

IntemalSet'IJnitializeO 

IntemalSet'l.getJnternalContextO 

IQueryable.get_Provider() 

Queryable.OrderByDescending[TSource,TKey](IQueryable'l source, E 

HomeController.Index(String SearchQuery, Int32 page) 
HomeControllerTestlndexO 



So, exception says Home controller tried 
to reach out the database, but couldn't 
find the connection string which it was 
looking for. And this test is invoking the 
home controller index action. But, next 
question you ask that how it is possible, 
because we have connection string 
defined for the web application and web 
application just works fine. So, how 
come exception is coming while running 
test. To answer this question, test is 
failing because we haven't configured 
this connection string for test. 

But, now am going to halt a bit and we'll 
take this problem some time later. For 
now, just focus on the topic TDD. I urge 
all the readers to make this TDD 



approach a habit while developing any 
web application as this is very 
beneficial. Writing Test cases or good 
Test cases covering your entire code 
ensures that your code will not break in 
those situations which you have tested 
with the test cases. Hence, it ensures the 
code which you are writing is quality 
code. Now, I have created one 
“ UnitTests ” folder in my unit test 
project. Now, in this I'll add my 1 st unit 
test as shown below in the screen shot. 




Now, in here my test, I'll be writing the 
test in such a way, that it should produce 
the movie which has the highest no of 

reviews 1 st . 


MovieReview Jests. UnitTests.UnitTestl 

TestMethodlO 

using Microsoft. VisualStudio.TestTools.UnitTesting; 
0 namespace MovieReview. Tests . UnitTests 

1 { 


//TO DO:- This case will ensure those movies come 
| [TestClass] 

J - public class UnitTestl 

1 { 

[TestMethod] 

# -J public void TestMethodl() 

{ 

} 

! > 

[} 

1 st which has reviews. 


As you can see in the above screen shot 
Visual studio has already given me the 
Test class with all the test attributes in 
place. Now, I'll do a bit modification 
here 



using System; 

using System. Collections .Generic; 

using Microsoft .VisualStudio.TestTools . UnitTesting; 
using MovieReview. Models; 

namespace MovieReview . Tests . UnitTests 

{ 


//TO DO:- This case will ensure those movies come 1st which has reviews. 
[TestClass] 

public class UnitTestl 

{ 

[TestMethod] 

public void TestMethodl( ) 

{ 

// Organise 


var data = new Movie(); 

data. reviews = new List<MovieReviews>(); 

data. reviews. Add (new MovieReviews( ){ReviewerRating = 5}); 
//Act 

var rater = new RateMovie(data); 
var result = rater . EvaluateRating(5); 

//Assert 

Assert . AreEqual( 5 , result . Rating) ; 

> 

> 

} 

Now, as you can see in the above 
method. 1 st have created an instance of 


Movie class. Now, when that instance is 
created then I created a list of Reviews 
for that Movie and then I added review 
for that movie. For now, I just created 
couple of reviews with rating 5. Now, I 
need API which will evaluate the movie 
rating. So, I'll write one more class to do 
the same. Eventually, these APIs 
basically sit in Web Applications, 
Business logic, but for now this is fine. 
So, below as you can see that I have 
created one class as “ RateMovie ” and 
“ RatingResult ”. 

using System; 

using System. Collections .Generic; 


using System. Linq; 
using System. Text; 
using System. Threading. Tasks; 
using MovieReview. Models; 

namespace MovieReview .Tests . UnitTests 

{ 

public class RateMovie 

{ 

private Movie _data; 

public RateMovie(Movie data) 

{ 

_data = data; 

} 

public RatingResult EvaluateRating(int rating) 

{ 

return new RatingResult ( ); 

> 

> 

> 

using System; 

using System. Collections .Generic; 
using System. Linq; 
using System. Text; 

namespace MovieReview. Tests .UnitTests 

{ 

public class RatingResult 

{ 

public int Rating { get; set; } 

> 


So, now I can go ahead and run the test, 
then it will produce me the below result 
as shown below. 
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Failed Tests (2) 
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TestMethodl 

Source: UnitTestl.es line 15 

O Test Failed - TestMethodl 

Message: Assert.AreEqual failed. 
Expected:<5>. Actual:<0>. 

Elapsed time: 35 ms 
A StackTrace: 

UnitTestl.TestMethodlQ 


So, it said while doing Assert, the 
expected result is 5 but, it is getting 0. 

So, now I would go ahead and assign 
some dummy value as 5, so that test case 
can pass as shown below. Because, 
currently in my business design I don't 
have anything or any logic which 
actually calculates rating, it just returns 
rating as user enters it. But, let's suppose 
any scenario where in you are validating 
any actual business scenario, then in that 
case, you will be calling that business 
class to evaluate your inputs and give the 
result, then with that item, you can go 
ahead do your verification or assertion. 
But, this is how TDD works. So, now I 
have modified my “ RateMovie ” class, 
now I am explicitly assigning value in 



there as shown below. 


using System; 

using System. Collections .Generic ; 
using System. Linq; 
using System. Text; 
using System. Threading. Tasks; 
using MovieReview. Models; 

namespace MovieReview. Tests . UnitTests 

{ 

public class RateMovie 

{ 


private Movie _data; 


public RateMovie(Movie data) 

{ 

_data = data; 

} 

public RatingResult EvaluateRating(int rating) 

{ 

var result = new RatingResultQ; 
result . Rating = 5; 
return result; 

> 

} 

> 

Now, when I run the test, then it should 
pass now. So, in the below screen shot it 
is reflecting “ TestMethodl ” as passed 
result. 


Test Explorer 


C-„ [{- ■» Search fi * 

Q Streaming Video: Improving quality with u w 
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^ Failed Tests (1) 

^ Passed Tests (3) 
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TestMethodl 

Source: UnitTestl.es line 15 

© Test Passed - TestMethodl 
Elapsed time: 5 ms 


Now, by seeing this approach you will 
say that you are just hard coding the 
values to make sure that test are passed. 


But, the beauty of TDD is this, you start 
small, even the simplest smallest 
possible thing you implement and then 
start adding conditions to it. So, the idea 
behind writing Test cases is let's 
suppose in future you are adding any 
new functionality to the application, and 
then in that case also your all test cases 
should pass. So, this basically ensures 
that your change is not breaking any 
existing thing. Now, once you have 
Passing Test in there then you can go 
ahead and start refactoring the code. In 
this case, I'll just rename few variables. 
So, below is the modified code 



using System; 

using System. Collections .Generic; 
using System. Linq; 
using System. Text; 
using System. Threading. Tasks; 
using MovieReview. Models; 

namespace MovieReview .Tests . UnitTests 

{ 

public class RateMovie 

{ 

private Movie _movie; 

public RateMovie(Movie movie) 

{ 

_movie = movie; 

> 

public RatingResult EvaluateRating(int numberOf Reviews) 

{ 

var result = new RatingResult( ); 
result . Rating = 5; 
return result; 

} 

} 

> 


So, as you can see that now it looks 
meaningful. So, another technique 


writing any test class is that Method 
Names or Test Classes or Variables 
should be descriptive enough so that any 
developer can understand the whole 
picture by just looking the same. 

Now, I have added 2 nd test in the unit 
test module. So, this one is responsible 
for passing two reviews as shown 
below. 


[TestMethod] 

public void Evaluate_Result_For_Multiple_Reviews( ) 

{ 

// Organise 

var data = new Movie(); 

data. reviews = new List<MovieReviews>(); 

data . reviews .Add (new MovieReviews( ) { ReviewerRating = 5 }); 
data. reviews .Add (new MovieReviews( ) { ReviewerRating = 3 }); 
//Act 


var rater = new RateMovie(data) ; 
var result = rater. EvaluateRating(5) ; 


//Assert 


Assert .AreEqual(4j result . Rating) ; 


} 

Now, I have also given these test 
methods a descriptive name as you can 
see above. And, I have also modified the 
implementation of “EvaluateRating” . 
So, it simply returns the average of 
reviews getting passed in using LINQ 
Query. 


public RatingResult EvaluateRating(int numberOf Reviews) 

{ 

var result = new RatingResult () ; 

result . Rating = (int) _movie . reviews .Average (m => m.ReviewerRating); 
return result; 

> 


Now, both the tests are passing. So, at 
this stage I can go ahead and start doing 
refactoring by cleaning up some code 
and making the same API based. So, as 
you can see below I have added one 
helper method just to make sure that it 
can take ratings and pass to multiple 
methods. It doesn't matter, whether you 
are passing single review or multiple 
reviews. 


private Movie SetupMovieAndReviews(params int[] ratings) 

{ 

var movie = new Movie(); 

movie . reviews = ratings . Select (m => new MovieReviews( ) {ReviewerRating = m}) 
• ToListQ; 
return movie; 

> 


//TO DO:- This case will ensure those movies come 1st which has reviews. 
[TestClass] 

public class UnitTestl 

{ 

[TestMethod] 

public void Evaluate_Result_For_One_Review( ) 

{ 

// Organise 

var data = SetupMovieAndReviews ( ratings : new[] {5}); 

//Act 

var rater = new RateMovie(data); 
var result = rater . EvaluateRating(5); 

//Assert 

Assert . AreEqual( 5, result . Rating); 

> 

[TestMethod] 

public void Evaluate_Result_For_Multiple_Reviews( ) 

{ 

// Organise 

var data = SetupMovieAndReviews ( ratings : new[] {3, 5}); 

//Act 

var rater = new RateMovie(data); 
var result = rater . EvaluateRating(5); 

//Assert 

Assert .Are Equal (4, result . Rating); 

} 

private Movie SetupMovieAndReviews (params int[] ratings) 

{ 

var movie = new Movie(); 

movie . reviews = ratings. Select(m => new MovieReviews( ) {ReviewerRating 

m>) 

.ToList(); 
return movie; 


} 

> 

> 

So, as you can see that I have used the 
helper method just to make sure that I 
can pass in multiple ratings or single 
rating with that method call itself. 
Hence, I saved couple of lines of extra 
code execution with refactoring 
technique. 


Home Controller Tests:- 

Now, the next test thing which I would 
like to do here is I need to fix my Index 


Action test which is failing now. So, 
basically whenever any infrastructure is 
getting involved while writing any Unit 
Test Case, you need to isolate them; here 
in this case it is database connection. So, 
here we can take two approaches, we 
write the unit test in such a way that it hit 
the controller and go to the database. 

But, the problem with this approach is 
like unit test will run a bit slower 
because it will follow the complete 
execution path. And Unit Test means it 
should run really fast. 

But, there is another problem also 
associated with this. Since, you are 
writing the test, so you want the 
controller to react predictably which 



means you need to have valid data inside 
the database and database setup is 
proper. So, in this case unit test case 
will always be dependent on the 
database and connecting to the database 
would make test to run slow. 

Now, the 2 nd option is Mocking. 
Mocking here means whenever I am 
running any test I am not required to 
connect to database, I'll be using some 
sort of in memory data to validate the 
same. And, while running the 
application, it can refer the database and 
while testing it will test with mocked 
data. So, now the thing here is I need to 
remove the database. And removing the 
database needs some sort of interface 



implementation. So, the interface will go 
in the file “ MovieDb.es ” as shown 
below 

public interface IMovieDb : IDisposable 
{ 

IQueryable<T> Query<T>() where T : class; 

} 

Now, this will represent all the 
operations which we want to do against 
the real database. So, here I just have the 
Query of “J” method. Now, here I want 
to query different entities like “ movies , 
movieReviews ”. So, now my 
“ MovieDb ” class which we have been 
using so far will implement “ IMovieDb ” 
as shown below. 


using System; 

using System. Collections .Generic; 
using System. Data; 
using System. Data . Entity; 
using System. Linq; 

using System. Security . AccessControl 
using System. Web; 

> 

> 

> 

So, up there in the modified 
implementation, you can see that 
“ MovieDb ” is now using “ IMovieDb ” 
Here, it implements the query method 
explicitly means you can only come to 
this query method through “ IMovieDb ’ 
reference. Now, the next thing which I 


would like to change here is in the 
“ Home Controller”, where in I need to 
reference the “db” against “ IMovieDb ” 
as shown below. 

private IMovieDb _movieDb; 


_movieDb = moviedb; 

} 

[OutputCache(CacheProfile= "Short", Location = OutputCacheLocation. Server, 
VaryByHeader = "Accept- Language")] 

public ActionResult Index(string SearchQuery = null,int page=l) 

{ 


> 


var model = _movieDb .Query<Movie>( ) 

.OrderByDescending(m => m. reviews . Count ( ) ) 

. Where (m=>SearchQuery==null | | m . MovieName . StartsWith (SearchQuery ) ) 
. Select (m => new MovieViewModel 
{ 

Id = m.Id, 

MovieName = m. MovieName, 

DirectorName = m.DirectorName, 

ReleaseYear = m. ReleaseYear, 

NoOf Reviews = m. reviews. Count () 

}) .ToPagedList(page, 10) ; 
if (Request. IsAjaxRequest( ) ) 

{ 

return PartialView( "_movies", model); 

} 

return View(model); 


So, as you can see in the above snippet, 


that I have created two constructors. One 
is the default constructor which will 
initialize this to “ MovieDb ” which we 
have been using in our application. And 
another one is the parameterized 
constructor where in I'll pass the 
Interface reference. Now, this will give 
a chance to Unit Test to pass. Now, in 
the test I need to setup a Fake 
Database. But, before that I need to 
create one Fake Class. So, below is the 
Fake class which I have created in its 
finished form 



using System; 

using System. Collections .Generic; 
using System. Linq; 
using System. Text; 
using System. Threading. Tasks; 
using MovieReview. Models; 

namespace MovieReview. Tests . UnitTests 

{ 

public class FakeMovieDb : IMovieDb 

{ 

public IQueryable<T> Query<T>() where T : class 

{ 


return Sets[typeof (T)] as IQueryable<T>; 

} 

public void Dispose() 

{ 

} 

public void AddSet<T>(lQueryable<T> objs) 

{ 

Sets .Add (typeof (T).objs); 

} 

public Dictionary<Type.object> Sets = new DictionaryCType, object>(); 

} 

} 


Now, let me explain what this is doing 


here. So, behind the scene it's just 
creating the in memory data. So, here 1 st 
thing is that I have defined one 
dictionary of “Type”. So, when you want 
to query a movie, will pull out that 
movie out of that dictionary by using 
“ IQueryable ” and pass it on to the Test. 
Now, there is also a method “ AddSet ” 
which allows you to add a set which you 
want inside this Fake Database. Now, 
for this to work I have also added a 
class which will add some 200 movies 
and every movie with a rating 5 as 
shown below. 



using System; 

using System. Collections .Generic; 
using System. Linq; 
using System. Text; 
using System. Threading. Tasks; 
using MovieReview. Models; 

namespace MovieReview. Tests .UnitTests 

{ 

class TestData 

{ 

public static IQueryable<Movie> Movies 

{ 

get 

{ 

var movies = new List<Movie>( ); 
for (int i = 0; i < 200; i++) 

{ 

var movie = new Movie(); 
movie. reviews = new List<MovieReviews>( ) 
{ 

new MovieReviewsfReviewerRating = 5} 

>; 

> 

return movies .AsQueryable( ); 

} 

> 

> 

} 


Now, with the above piece of code in 
place, when I'll run the same it will 
again fail, but now it fails for a different 
reason. This time it fails for Ajax 
request which you can see below in the 
screen shot of the Test Explorer. 
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Source: HomeControllerTest.es line 18 

Q Test Failed - Index 

Message: Test method 

MovieReview.Tests.Controllers.HomeController 
TestJndex threw exception: 
System.ArgumentNu II Exception: Value cannot 
be null. 

Parameter name: request 

Elapsed time: 43 ms 
^ StackTrace: 
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HomeControllerTest.IndexO 


Now, to overcome this, I have another 
class defined which is 
“ FakeControllerClass ” which will give 
a Fake Context basically a Fake 
HTTP Context which will have a Fake 
Request Object. Now, this Fake 
Request object is really doing nothing. It 
is just returning null and empty 
collection everywhere. 



using System; 

using System. Collections .Generic; 

using System. Collections .Specialized; 

using System. Linq; 

using System. Text; 

using System. Threading. Tasks; 

using System. Web; 

using System. Web. Mvc; 

namespace MovieReview. Tests .UnitTests 

{ 

class FakeController :ControllerContext 

{ 


private HttpContextBase _ctx = new FakeHttpContext( ) 


public override System. Web. HttpContextBase HttpContext 

< 

get 

{ 

return _ctx; 

} 

set 

{ 

_ctx = value; 

> 

> 

> 

class FakeHttpContext : HttpContextBase 

{ 

HttpRequestBase _request = new FakeHttpRequest( ); 

public override HttpRequestBase Request 

{ 

get 

{ 

return _request; 

> 

} 


class FakeHttpRequest : HttpRequestBase 

{ 

public override string this [string key] 

{ 

get 

{ 

return null; 

} 

) 

public override NameValueCollection Headers 

{ 

get 

{ 

return new NameValueCollection(); 

} 

> 


} 


Now, with this code in place, when I run 
the same, it will again fail, but this time 
at least it came to assert statement as 
shown below. 
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Source: HomeControllerTest.cs line 18 

O Test Failed - Index 

Message: Assert.AreEqual failed. Expected: < Modify 
this template to jump-start your ASP.NET MVC 
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Elapsed time: 672 ms 
* StackTrace: 
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HomeControllerTestJndexO 


Now, the assert is failing for obvious 
reasons, because now view bag is 
empty. And also it matching against the 
string “ Modify this template to jump- 
start your ASP.NET MVC 
application which we have changed. 
So, basically this assert itself is not 
valid in this context. So, now I need to 
modify this. Now, what I am going assert 
is; just check whether the model is null 
or not. 


[TestMethod] 

public void IndexQ 
{ 

var db = new FakeMovieDb( ); 
db. AddSet( Test Data .Movies) j 
// Arrange 

HomeController controller = new HomeController (db) ; 


controller . ControllerContext = new FakeController( ) ; 
// Act 

ViewResult result = controller . Index( ) as ViewResult 
// Assert 

Assert . IsNotNull( result .Model) ; 


Now, with the above code in place, I 
should be able to pass this test which 
you can see below in the screen shot. 


Test Explorer T I X 
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Run All I Run... ▼ I Playlist : All Tests ▼ 
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Source: HomeControllerTest.es line 19 

© Test Passed - Index 
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So, this way we can create as many test 
cases as we want. So, I leave this on 
readers that how many test cases they 
would like to test for the application 
logic. 


Web Tests 

Now, Unit Tests basically enable you to 
test pieces of your application in which 
they validate the logic within the 
application and make sure that 
everything is correct. However, there 
are other aspects which couldn't get 
checked with these unit tests but they are 
equally important. Like there could be 
certain code flaws in your application 


which is not capable of handling 
simultaneous user logins or in short 
heavy traffic. Now, using Visual Studio 
you can go ahead and configure your 
Visual Studio for the application in such 
a way, that it will create virtual users for 
your application and you can test the 
application behavior at that instant. So, 
without wasting time, let's go ahead and 
add one additional project for Web Test 
project in our application as shown 
below. 




Now, when I click ok, it will create one 
new project for me in the solution 
explorer as shown below. 


'Cl Solution 'MovieReview' (3 projects) 

•a £ Solution Items 

+ 0 ^ Local.testsettings 
t> 8^] MovieReview 
> sEl MovieReview.T ests 
^ +E2 MovieReview.WebT est 
> + A Properties 
•a References 

Microsoft. VisualStudio.QualityTools.WebTestFramework 
System 

WebTestl.webtest 


Now, I will delete this default template 
given to me by visual studio 
“WebTestl.webtest” and will add a new 
web test project as shown below. Now, 
as soon as I add a new web test project, 
it will automatically open the browser 
where in it will be recording our 
sessions as shown below. Also, if by 


default in your browser web test 
recorder won't appear check your “ IE 
Add ONs ” setting and enable it for Web 
Test Recorder as shown below. 



Now, since I have already enabled in my 
browser so, when I go ahead and click 


on below shown icon, it will open the 
browser with recording bar 




So, as you can see in the left panel, it 
listed all the http requests when I clicked 
on various links in my application. Now, 
when I click on stop recording, it will 
take me to Visual Studio back with ran 
results as shown below 




Now, when I click on the 1 st icon as 
shown below, then it will run the test 
and give me snapshot of the Test. 



On running the test it will produce the 
below result. 



So, as you can see in the above screen 
shot, it has given page by page analysis, 
like Status Code, Total Time Taken, 
Request Time and many more 
parameters necessary to decide your 
application performance. Now, like 
these you can test many other tests like 
Validation Rule Test, Extraction Rules 


Test and many more. 


Load Tests:- 

Now, one important piece I would like 
to demonstrate here is load test. So, 
basically a Load Test is a combination 
of Unit Test and Web Performance 
Test. So, as I said load test is going to 
simulate your application with lots of 
virtual users at the same time. So, when 
you run the load test, some of the most 
crucial parts to look for are 
Performance Counters like Perfmon, 
User Statistics and many more things on 
the server. So, let's go ahead and add 
Load Test in our application. So, we 


will do right-click on Web Test Project 
and do the following things as shown 
below in the screen shot 



Show on Code Map 


Set as StartUp Project 
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Now, click on next button. This will 
open a new page where in you can go 
ahead and set variety of Test Counters 
as shown below. 



Now, as you can see in the left panel 
there is variety of test patterns or 
counters which you can set to test in 
different scenarios. Currently for demo 
purpose I am good with default settings, 
till the point I reach the point Test Mix 
as shown below in the screen shot. 




Now, here I need to add test cases by 
clicking on Add button as shown below 
in the screen shot. 
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Now, here you need to select the Test 
Cases which you are interested in by 
clicking the arrow button. 



Then I'll click ok and I'll just click on 
next button till the time I reach “ Counter 
Sets”. Now, in Counter sets I would like 
to set couple of things like shown below 



Now, here I have done couple of things, 

1 st by clicking on Add Computer button I 
added two nodes, 1 st node I have named 
as “ Webserver ” and added all the server 
side counters in that, then again I clicked 
on Add Computer and given the name 
“ Database ” Server and then added SQL 
settings in that. If you notice in the above 


screen shot, I have also given tag names 
to both the computers as it would be 
helpful to analyze when Test is running. 
Now, in the next page I will set Run 
Settings as shown below 



So, here I have set the test duration for 1 
minute. Now, this test will run for 1 
minute and capture all the data. Other 


things like Save the log even if test fails 
is set to true, that's by default. Also I am 
keeping Validation rules High, as this is 
my 1 st test so I want all the scenarios 
should get covered. Now I am going to 
click on Finish. Once, I click on Finish 
button, it will generate the Load test for 
me with all the scenarios and counters 
which I have set in the wizard as shown 
below. 



LoadTestl.loadtest -e X 


"A - 5* % 8i >° 

LoadTestl 
1=1 Scenarios 

S-SP MovieLoadTestScenario_l 
A Test Mix 
A [20 %] Index 
A [20 %] About 
A [20%] Contact 

A [20%] Evaluate_Result_For_Multiple_Reviews 
A [20 %] Evaluate_Result_For_One_Review 
h db Network Mix 
[100%] LAN 

C* Constant Load Pattern 
(=)-fl Counter Sets 

Application 
; + . \M ASP.NET 

iii-[gjl .NET Application 

| ±j # ns 

I +J M SQL 
(j)-[§p LoadTest 
(±)-|Sp Controller 
i EJ- [p Agent 
(=) Run Settings 

(=)••• ► Run Settingsl [Active] 

(=)"-til Counter Set Mappings 
i - 1 WEBSERVER (Webserver) 

+ 1 DATABASE SERVER (Database Server) 

S | [CONTROLLER MACHINE] 

. | [AGENT MACHINES] 


Output 


Now, when I check certain properties 



like load pattern property, you will 
notice that default value is set, and that 
is set for “25 users ” which we have 
chosen from the wizard. 



So, now we have everything in place, I'll 
just go ahead and click the button on the 
top left and then it will produce the 
below result. 



Now, when you click on Graphs, it will 
display the how specific test scenarios 
behaved. 



You can also analyze the snapshot of the 
test counters which you have added like 
shown below 



Code Coverage:- 

Code Coverage is one of the best things 
which give you the snapshot of Test 
Cases. Means, the test cases which you 
have written, how much code it is 


actually covering in your application. 
So, when you run the Code Coverage 
from the Test Explorer after running all 
the tests, it will give you statistics as 
shown below. 


Test Explorer 

C> [[= » Search 


Q Streaming Video: Improving quality with ■ w 
Run All | Run... ▼ I Playlist : All Tests ▼ 


^ Passed 1 

Run Failed Tests 


O Abou 

Run Not Run Tests 


© Conti 

Run Passed Tests 


O Evalu 

Repeat Last Run 

Ctrl+ R, L 

© Evalu 
© Index 

Analyze Code Coverage for All Tests 



P- 



So, as you can see from the statistics, it 



is giving not covered percentage as 
80.49% which is very huge. Reason 
being, I have just written test case only 
for Home Controller Index action. So, 
now, when I open this and go inside it I 
can see my results and that is quite 
satisfactory percentage. 




Now, when I open this controller's 
section I can see home controller in 
there is 96% which is a very good 
percentage. 


Summary:- 


So, in this chapter, we have covered one 
of the most important things of MVC that 
is Unit Testing. So, we have seen how to 
test different logics of our application by 
simply writing different test case also by 
writing some of the helper classes or 
associated methods. We have also seen 
how to test UI with Web Tests and Load 
tests. Apart from testing, we have also 
covered code coverage, which basically 
gives the snapshot of your test cases. 


Now, I would like you guys to make this 
habit always writing test cases for your 
application. 



Chapter 10: 
Deployment 

WHAT DO you find in 
this CHAPTER? 


=> Introduction 
=> Configuration Files 


=> Hosting ASRNet MVC 
Application 

=> Deployment Preparation 
=> Deployment on IIS 
=> Deployment on Azure 
=> Summary 


Introduction:- 

Hi friends, I hope you guys have enjoyed 
building an ASP.Net MVC application 
End to End. Now, we have done with 
our Development and Testing. So, now 
it's time for Deployment. Now, in this 


entire module, I'll discuss various 
techniques involved for deployment and 
also the minor details which you must 
follow while deployment. I'll start the 
discussion with different types of 
configuration files involved in ASP.Net 
application, and then will go through the 
key ingredients required for hosting any 
ASP.Net MVC Application. Once, that is 
done then I'll 1 st host the site on IIS and 
then online on Azure. 


Configuration Files:- 

So, basically configuration files in .NET 
are nerve of ASP.Net architecture. They 
control everything about execution 


environment. So, settings like 

• Authentication 

• Compilation 

• Custom Errors 

• Cryptography 

• Connections 

are basically controlled by configuration 
files. So, the settings which I have listed 
above are not the only ones which are 
controlled by configuration files. It 
controls many more things. The 
configuration setting in .NET is pretty 
much extendable. So, you can write your 
own custom configuration. Hence, what 
you need is appropriate classes to 
support them. Now, when I say my 
custom setting, I can go ahead and define 



my custom setting inside the section 
‘ ‘ <appSettings >’ ’ . Like below in the 
sample, I have added one Key with one 
value and I'll retrieve the same in my 
web application using one special class 
known as “ConfigurationManager” . 


<appSettings> 

<add key="webpages : Version" value="2. 0.0.0" /> 
odd key="webpages : Enabled" value="false" /> 
odd key="Preservel_oginUrl" value="true” /> 
odd key="ClientValidationEnabled" value="true" /> 

Odd key="Unobtrusive3avaScriptEnabled" value="true” /> 
odd key="elmah .mvc .disableHandler" value=”false" /> 
odd key="elmah.mvc.disableHandleErrorFilter" value="false" /> 
odd key="elmah.mvc.requiresAuthentication" value="true" /> 
odd key="elmah.mvc.IgnoreDefaultRoute" value="false" /> 
odd key="elmah.mvc.allowedRoles" value="Admin" /> 
odd key="elmah .mvc .allowedUsers" value="*" /> 
odd key="elmah .mvc . route" value="elma h" / > 


Now, let me retrieve the same in my 



view. 



Now, with the above code in place, I 
could see my custom setting value on the 
home page. 





So, basically “ ConfigurationManager ” 
is the basic class which can read 
“Appsetting value ” by just providing the 
key Now, the value which I have 
retrieved directly in view, you can grab 
the same value from the controller itself. 
What you can do you can just put this 
setting in the “view bag” and then in the 
view you can just output the result. So, 
basically config files are a placeholder 
which holds settings value means which 
you don't want to hard code for your 
application. 

One important thing to understand here, 
that configuration files in .NET here are 
hierarchical means the configuration in 
your application is not only governed by 



the “ web.config ” file which you are 
having in the root of your project but 
also dependent on “ configuration files ” 
at higher level. So, basically for any 
MVC application configuration path 
follows route 

• machine, config 

• machine Web.config 

• Parent Web.config 

• \four proj e ct we b.config 

So, “ machine.config ” file controls all 
the basic settings for your .Net 
applications that run on your machine. 
Now, all .NET applications irrespective 
of its nature are governed by this 
Machine.config file. Now, there is also 
machine level web.config file; we have 



already looked at this file when we have 
discussed Health Monitoring in the 
previous chapter. So, basically it puts all 
the default settings for every ASP.NET 
Web Application running on the 
machine. Now, the next thing could be or 
couldn't be your parent web.config. It 
actually means the scenario where in 
your project is dependent on some other 
primary project. So, basically your 
project web.config file at that time is 
going to inherit the settings from the 
parent's project web.config file. 

However, inside my project web.config 
file, I can go ahead and override 
machine level config or machine level 
web.config file settings. So, if you open 



the machine config file by navigating the 
path 

“C: 1 Window s\Microsoft.NET\Framewi 
You will actual see both the files in there 
as highlighted below in the screen shot. 




« Microsoft.NET ► Framework64 ► v4 .030 319 ► Config ► 


l«d! Config 

Organize » 

Include in library » Share with » Bum New folder 


1= » a 


Name Date modified Type Size 


S Desktop 

k Browsers 

5/8/2014 10:38 AM 

File folder 

] 

jg. Downloads 

|H DefaultWsdlHelpGenerator 

3/18/2010 11:57 AM 

ASP.NET Server Pa... 

69 KB 

't&'I Recent Places 

1 Jj legacy.web_hightrust 

3/18/2010 4:32 PM 

CONFIG File 

13 KB 


["* i legacy.web_hightrust.config.default 

3/18/2010 4:32 PM 

DEFAULT File 

13 KB 

a 3 Libraries 

|aj legacy.webjowtrust 

3/18/2010 4:32 PM 

CONFIG File 

8KB 

i’ [j] Documents 

[ | legacy.webjowtrustconfig. default 

3/18/2010 4:32 PM 

DEFAULT File 

8 KB 

i> Music 

i__j legacy.web.mediumtrust 

3/18/2010 432 PM 

CONFIG File 

12 KB 

i !fa| Pictures 

i leqacy.web_mediumtrust.confiq.default 

3/18/2010 4:32 PM 

DEFAULT File 

12 KB 

B Videos 

[2] legacy.web_minimaltrust 

3/18/2010 4:32 PM 

CONFIG File 

7 KB 


1_1 legacy.web minimaltrust.config.default 

3/18/2010 4:32 PM 

DEFAULT File 

7 KB 

a Rahul.Sahay WN7X64- 

lii machine 

3/19/2014 3:00 PM 

CONFIG File 

34 KB | 

— ■ Windows (C) 

1 machine.config.comments 

9/11/2013 4:43 PM 

COMMENTS File 

90 KB 


, | machine.config. default 

9/11/2013 4:43 PM 

DEFAULT File 

36 KB 

Network 

B NetFx40_IIS_schema_update 

3/18/2010 11:58 AM 

XML Document 

4KB 


|'=i NetFx45_HS_schema_update 

3/21/2013 5:24 PM 

XML Document 

3 KB 


| _ web 

5/25/2014 7:01 PM 

CONFIG File 

43 KB 


[j web. config. comments 

3/21/2013 5:24 PM 

COMMENTS File 

68 KB 


R web.config.default 

9/11/2013 5:20 PM 

DEFAULT File 

43 KB 


la] web_hightrust 

3/18/2010 4:32 PM 

CONFIG File 

11 KB 


uifph hinhtruct rnnfin default 

3/1R/7mnd'3? PM 

DFFAI II T File 

11 Kft 


Now, when you open machine. config 
file, you can see some of the ASP.Net 


settings as shown below, 


<httpModules> 

odd name=”OutputCache” type=”System. Web. Caching. OutputCacheModule" /> 

odd name=”Session” type="System.Web.SessionState.SessionStateModule" /> 

odd name=”WindowsAuthentication” type="System. Web. Security. WindowsAuthenticationModule" /> 

odd na»e="FormsAuthentication" type=”System. Web. Security. FormsAuthenticationModule" /> 

odd name="PassportAuthentication" type="System. web. Security. PassportAuthenticationModuXe" /> 

odd name=”RoleManager” type=”System. Web. Security. RoleManagerModule” /> 

Odd name="UrlAuthorization" type="System. Web. Security. UrXAuthorizationHoduXe" /> 
odd name=”FiieAuthorization” type=”System. Web. Security. FiieAuthorizationModule" /> 
odd name=”AnonymousIdentif ication" type=”System . Web. Security .AnonymousIdentificationHodule" /> 
odd name=”Profiie” type=”System.Web.Profiie.ProfiieModuie" /> 

Odd name="ErrorHandlerHodule" type=”System.Web.Mobiie.ErrorHandierHoduXe, System. Web. HobiXe, Version=4. 0.0.0, CuXtu 
odd name=”ServiceModeX" type="System.ServiceModeX. Activation. HttpHoduXe, System. ServiceModeX . Activation, Version=4. 
odd name="UrlRoutingModule-4.0" type “"System .Web . Routing . UrXRoutingModuie" /> 

odd name="ScriptHoduie-4.0" type="System.Web . Handlers .ScriptModule, System. Web. Extensions, Version=4. 0.0.0, Culture 
</httpWodules> 


Like this, we have many more settings in 
this file which govern ASP.NET 
application setting in your application. 
Similarly, we also have web.config file 
at machine level which also governs 
default settings in our application. Now, 
apart from these web.config files; in our 
application we have one more 
web.config file inside the views folder 
which governs the razor settings as 
shown below. 




<appSettings> ^ 
</appSettings> 


<httpHandlers> 

odd path="*" verb=“*" type="Systeai.Web.HttpNotFoundHandler"/> 
</httpHandlers> 


So, as you can see above we have added 
couple of namespaces for paged List 
earlier. So, these namespaces are 
basically required to provide you the 
intellisense in the views. Now, another 
interesting setting that is mentioned here 
is “<httpHandlers >” . So, here what this 
component is doing if any request 
arrives which is not resolved by your 


MVC application, then it will be picked 
by ‘ L H ttp Not Found H andlef ’ . Now, this 
component is responsible for returning 
404 errors to the client. This is 
essentially here to ensure that any user 
cannot directly go to the view like 
http://localhost:l 034/home/index, cshti 
One must follow the routing rule; hence 
request must come from the controller 
directly and it's controller's 
responsibility to choose a view and 
redirect user on the page. 


Hosting ASP.Net MVC 
Application 

Now, since we have understood the 


basics of ASP.Net configuration. So, it's 
time to move on and start the process for 
deployment. So, basically whenever we 
are building any MVC application, we 
are basically producing a “<///” file 
associated for the same with all the 
application settings and logic inside. 
Now, these “<///s” sit in the bin directory 
of the project as shown below in the 
screen shot. 



a bin 

> ■ bin 

t> de 

> es 

> m fr 

> M it 

> m ja 

> m ko 

> m ru 

> zh-Hans 

> zh-Hant 

HI Antlr3.Runtime.dll 
111 DotNetOpenAuth.AspNet.dll 
,£| DotNetOpenAuth.AspNet.xml 
HI DotNetOpenAuth.Core.dll 
,£l DotNetOpenAuth.Core.xml 
HI DotNetOpenAuth.OAuth.Consumer.dll 
,0 DotNetOpenAuth.OAuth.Consumer.xml 
111 DotNetOpenAuth.OAuth.dll 
DotNetOpenAuth.OAuth.xml 
111 DotNetOpenAuth.OpenId.dll 
111 DotNetOpenAuth.OpenId.RelyingParty.dll 
DotNetOpenAuth.OpenId.RelyingParty.xml 
,£l DotNetOpenAuth.OpenId.xml 
Q Elmah.dll 
Lr Elmah.Mvc.dll 
111 EntityFramework.dll 
( [^l EntityFramework.xml 
°‘° r -'- J " 


Now, one important point to understand 
here dlls are not self hostable. They 
need some kind of mechanism to get 
hosted. And for websites the host 
process is Webserver, where in we 
configure the application and IIS settings 
accordingly. Now, this HOST process 
also takes care of delivering HTTP 
requests inside our application dll. So 
far during the course of development, we 
have been using “7/5 Express ”. Now, 

IIS Express makes the development 
process very easy and very smooth, it 
takes our development setting what we 
are building and produce the output. 

Now, one important thing is IIS Express 



runs with our Identity and we can any 
time Stop or Start the Webserver 
whenever we want. But, when we are 
deploying the application on Internet or 
Intranet, then in that case we'll be using 
complete version of IIS. So, we can 
install IIS on any version of windows. 
But, it is off by default on our machines. 
So, for enabling the same we can go into 
“ Windows Features ” from the control 
panel and check the required setting as 
shown below in the screen shot. 




So, as you can see in the screen shot, I 
have already installed IIS and its 
associated component on my machine. 
Now, one more option you can consider 
for installing all these things via “ Web 


Platform Installer ”. Also, I have 
already installed SQL Server Express 
Edition. Now, after installing IIS, you 
can verify the same from the browser as 
shown below in the screen shot. You just 
need to navigate to “ localhost ” and it 
will produce the default page for the IIS. 

Cl localhost 



Also, my SQL instance is running fine. 
You can also verify the same by logging 


into the same as shown below:- 


^ Microsoft SQL Server Management Studio 


Object Explorer 


•r 4 X 

Connect ' 

' Gas 



File Edit View Debug Tools Window 
U New Query Qi ai ta QS E? ■ 


Help 


.\sqlexpress (SQL Server 10.02531 - AMERICA 


Q UJ[ 

B LA Databases 

El CM System Databases 
E) il MovieReview.Models.MovieDb 
IS )| MoviesRevie 
El LA Security 
S LA Server Objects 
B LA Replication 
B CM Management 



Our application db. 


Now, below is the dashboard for our IIS 
Settings. 



WN7X64-1B3R5Z1 Home 

— 

s — - 

% © OB IH J- * % 

■ 



} A » a -g „ m m a « 


m % * r 9 ■’ >- m 


EABIFll,e ' s Logging MIME Type Module fetpu 


s 9 a . 



Deployment Preparation:- 

So, as shown above there are tons of IIS 
settings listed in this dashboard which 
you can go ahead configure for your 
application. Now, all these settings 
which you will be setting or changing 
will be mapped to xml files or config 
files which we have been looking earlier 
in this chapter. Now, when I expand the 


machine node I can see two sub nodes, 
one with the Application Pool and the 
other which is having Sites. Now, an 
Application Pool is a process in which a 
web application will run. 



Now, here we can go ahead and create 
our custom pools as well. But, here I'll 
be using “ Default AppPooF the last one 
listed in this list. Now, as you can see 
that there is already one application 
running in there. And this is the default 
IIS Application, which we have just 


seen, when we navigated to 
http://localhost/ . Now, if we go to task 
manager of windows by just right 
clicking on the task bar and selecting 
“ Start Task Manger". 


Toolbars ► 

Cascade windows 
Show windows stacked 
Show windows side by side 
Show the desktop 

Start Task Manager 

V Lock the taskbar 
Properties 


And, when you open the task manager, 
then you will find one process with the 



name “w3wp.exe” as shown below. This 
is actually “ World wide web worker 
process ” exe. So, this will be the 
process which will host our MVC 
Application. 



Windows Task Manager 


File Options View Help 


Applications Processes Services | Performance | Networking | Users 


P71 Show processes from all users 


A 

Image Name 

User Name 

CPU 

Mem... 

Description 

* 

unsecapp.exe 

SYSTEM 

00 

1,65... 

Sink to re... 

vstest. disco v... 

Rahul_. . . 

00 

19,9... 

vstest. dis... 

vstest.discov... 

Rahul_. . . 

00 

19,9... 

vstest.dis... 

vstest.execut... 

Rahul_. . . 

00 

11,8... 

vstest. ex... 

VsTskMgr.exe... 

SYSTEM 

00 

1,50... 

Task Man... 

! w3wp.exe 

Rahui_... 

00 

192,... 

IlSWorke... j 


wininit.exe 

SYSTEM 

00 

1,33... 

Windows . . . 


winlogon.exe 

SYSTEM 

00 

2,86... 

Windows . . . 

WINWORD. E... 

Rahul_. . . 

00 

127,... 

Microsoft ... 

WmiPrvSE.exe 

SYSTEM 

00 

3,08... 

WMI Prov... 

WmiPrvSE.exe 

SYSTEM 

00 

5,06... 

WMIProv... 

WmiPrvSE.exe 

NETWO... 

00 

15,0... 

WMI Prov... 

WmiPrvSE.exe 

SYSTEM 

00 

12,9... 

WMI Prov... 

WmiPrvSE.exe 

LOCAL ... 

00 

2,45... 

WMI Prov... 

WmiPrvSE.exe 

SYSTEM 

00 

6,00... 

WMI Prov... 

- 


End Process 


Processes: 104 CPU Usage: 2% 


Physical Memory: 80% 


Now, there are certain tasks which I 


need to configure before deployment. 

So, the 1 st thing I'll do is change our 
migration setting. Now, I'll make 
‘ L A utom ati cM igrati onsEn abelcT ’ set to 
false. We have set this to true during 
development just to make sure that our 
models are in sync. 

public Conf iguration( ) 

{ 

AutomaticMigrationsEnabled = false 

> 

Now, the next thing which I am going to 
do is restart the migration process. So, 
now I also want to comment out the 
section from where I injected 100 
movies to test sorting and paging. 


//for (int i = 0; i < 100; i++) 

//{ 

// context. Movies. AddOrUpdate(m => m.MovieNamej 

// new Movie { MovieName = "Anony_Movie_" + i.ToString( ), 

DirectorName = "Anony_Director_" + i.ToString ( ) , ReleaseYear = "2014" }); 

//> 

Then, I'll also delete my initial create 
database script as highlighted below. 


Solution 'MovieReview' (2 projects) 
a <§] MovieReview 
a f* Properties 

> c# AssemblyInfo.es 

> References 

> App_Data 

> App_Readme 

> App_Start 

> bin 

> Content 

> Controllers 

> Filters 

> Images 

Migrations 

> C* 201405102004410_InitialCreate.cs 

> c* Configuration.es 

> Models 

> Cl obj 

> Scripts 

a Views 

> Account 

> Home 

> MovieReviews 

> Movies 

> Shared 

C@0 ViewStart.cshtml 


Now, I'll also create the same from 
scratch using a new database and the 
definition of schema will be based on 
what is in our model right now. Now, the 
best way to do the same with Entity 
Framework itself. But, before this I'll go 
ahead and delete our existing database 
as shown below from the management 
studio. 



tyi Microsoft SQL Server Management Studio 

File Edit View Debug Tools Window Community Help 
S. New Query Qj| ^ 


Object Explorer 

Connect ^ ^ .fjjj 


- 4 X 


[3 ^ 


B liJ Asq I express (SQL Server 10.0.2531 - AMERICA] 
B L2 Databases 

B 3 System Databases 
0 J MovieReview.Models.MovieDb 

a ml 

B L3 Security 


MoviesRevipw 


B LJl Replication 
B LJ Managemen 


New Database... 
New Query 
Script Database as 

► 

Tasks 

► 

Policies 

► 

Facets 


Start PowerShell 

Reports 

• 

Rename 

Delete 


Refresh 

Properties 




X Delete Object 



Select a page 
^ General 


^ Script ▼ O Help 


Object to be deleted 



Object Type Owner Status 


AM. 


Message 


Connection 

Server: 

Asqlexpress 

Connection: 

AMERICAS\Rahul_Sahay 
^ View connection properties 

Progress 

Ready | [7] Delete backup and restore history information for databases 


So, now we have successfully dropped 
our database. Now, let's open the 
package manager console and let's 
create our initial migration file with the 
PowerShell command “Add-Migration 


171 Qose existing connections 


| OK ] | Cancel ] 


InitialCreate”. Also, since we are not 
using “ Automatic Migartions ” , so we 
won't be able to go ahead and say 
“ Update-Database ” from the 
powershell command. 




So, in the above screen shot, we can see 



that command executed successfully and 
hence created the brand new 
“ InitialCreate ” file. Now, below is the 
script which is generated after running 
the command. 

namespace MovieReview.Migrations 



namespace MovieReview. Migrations 

{ 

using System; 

using System. Data . Entity .Migrations; 

public partial class InitialCreate : DbMigration 

{ 

public override void Up() 

{ 

CreateTable( 

"dbo . UserProf ile" , 
c => new 
{ 

Userid = c . Int(nullable : false, identity: true), 
UserName = c.String(), 

FavoriteColor = c.String(), 

}) 

. PrimaryKey(t => t. Userid); 

CreateTable( 

"dbo. Movies", 
c => new 
{ 

Id = c . Int(nullable: false, identity: true), 
MovieName = c.String(), 


DirectorName = c.String(), 

ReleaseYear = c.StringQ, 

}) 

.PrimaryKey(t => t.Id); 

CreateTable( 

"dbo.MovieReviews", 
c => new 
{ 

Id = c.Int(nullable: false, identity: true), 

ReviewerName = c.String(), 

ReviewerComments = c.String(nullable: false, maxLength 

200 ), 

ReviewerRating = c . Int(nullable : false), 

Movield = c . Int(nullable : false), 

» 

. PrimaryKey(t => t.Id) 

. ForeignKey( "dbo. Movies", t => t. Movield, cascadeDelete : true) 
-Index(t => t. Movield); 


} 

public override void Down() 

{ 

DropIndex( "dbo.MovieReviews", new[] { "Movield" }); 

DropForeignKey( "dbo.MovieReviews", "Movield", "dbo. Movies") ; 

DropT able ( " dbo . MovieReviews " ) ; 

DropT able ( " dbo . Movies " ) ; 

DropT able ( "dbo . UserProf ile" ) ; 

> 

> 

} 

So, here you can see that it includes 
everything which we have been using in 
our application. Now, the next thing 
which I want to do here is to ensure that 


when it gets deployed, it should run the 
migration automatically. But, before that 
I want to put a checkpoint where it will 
make sure that “ WebSecurity ” doesn't 
get initialized more than once. 
Otherwise, it will throw exception here 
and everything will get stop here itself. 


if ( JWebSecurity. Initialized) 

{ 

WebSecurity . Init ializeDatabaseConnect ion ("Def aultConnect ion", 
"UserProf ile", "Userid", "UserName", autoCreateTables : true); 

} 


Now, I also need to put the same 
checkpoint in the “ global, asax ” file as 
well as shown below in the screen shot. 



vcApplicati' 


otected void Application_Start() 
if ( ! WebSecurity . Initialized ) 
WebSecurity . InitializeDatal 

s 

AreaRegistration.RegisterAllAn 

WebApiConfig.Regi 
FilterConfig.Regj 
RouteConf ig . Regi* 


s()i 


[er(QlobalConfiguration.Confi| 
:erGlobalFilters(GlobalFilter 
;rRoutes(RouteTable. Routes); 
:erBundles ( BundleT able . Bundle 
•Auth(); 


Now, in the “ application start ” event 
itself I would like run the migrations, 
now I can do the same using 
“ DbMigrator ” as shown below 

var migrator = new DbMigrator(new Conf iguration( ) ) ; 
migrator .Update( )j 


Now, what this will do, it will run the 
seed method and make sure that database 
is populated properly. 


Deployment on IIS:- 


Now, I think we are good to go with IIS 
Deployment. So, when you are ready to 
deploy the project, what you can do, 
right-click the project and click on 
publish and this will produce the below 
options. 


& Build 
Rebuild 
Clean 



View 


► 


Analyze 


► 


Convert 


► 

& 

Publish... 




Scope to This 



0 

New Solution Explorer View 



& 

Show on Code Map 




Build Dependencies 


► 


Add 


► 


Manage NuGet Packages... 



0 

Set as Startup Project 




Debug 


► 


Source Control 


► 

& 

Cut 

Ctrl+X 


□J 

Paste 

Ctrl+V 


X 

Remove 

Del 


Ufa 

Rename 




Unload Project 




Find Code Issues 

*■(= Find Symbols External to Scope 


Publish Web 


Publish Web 



Connection 

Settings 


Select or import a publish profile 

| ^ I lm P° rt - I 

| Manage Profiles... | 


Publishing to Windows Azure Web Sites? Sian up for a free account 
Find other hosting options at our web hosting gallery 


So, Visual Studio will figure out all the 
things like what are the files that need to 
deployed on the web server, collect 
them and push them there. So, the 1 st 
thing I need to do here is create new 


profile. For doing that I will click on the 
dropdown and click on New Profile by 
giving there some profile name. Let's say 
“ Production ” as profile name. 


Publish Web 


Publish Web 


’ S 


Select or import a publish profile 


Connection 

Settings 

Preview 


▼ j | Import... | 

Manage Profiles... 



And then on the next screen I will select 




the publish method, now here you will 
get multiple options like shown below 



So, if you would like to FTP, then Visual 
Studio will do that for you. You can also 
push the files on the file system. Now, 


you can also use Web Deploy option, 
then you need to specify the server name 
and site name as well, then it will 
directly push the files on that server. So, 
the option here what I am going to use is 
web deploy package. Now, a web 
deploy package is a zip file; you can 
simply take this zip file and install the 
same on the Webserver. Now, I'll 
provide the below parameters as shown 
below in the screen shot. 




Then, I'll go ahead and click on next 
button, it will ask whether you want to 
deploy in release or debug mode, I'll 
select release mode. And then I'll also 
assign a connection string as default 
connection. So, currently the default 



connection is the one which is there in 
“ web.config ” file. So, I can specify the 
same by using the helper button just after 
the text box in connection string setting 
with the below mentioned parameters. 



Destination Connection String 


Enter information to connect to the selected data source or click "Change" to 
choose a different data source and/or provider. 


Data source: 


Microsoft SQL Server (SqlClient) 
Server name: 


Log on to the server 

o Use Windows Authentication 
(_ Use SQL Server Authentication 

Username: | 

Password: 


[~~1 Save my password 


Connect to a database 
o Select or enter a database name: 


MovieReviewRelease 
0 Attach a database file: 


Logical name: 


Change... 


Refresh 


Browse.., 



Now, I say ok. Then, it will take the 
effect. 



Now, when the application is deployed, 
the connection string will be substituted 
and replace the same what we have been 




using for our development. Then, you 
can also select the next check box, which 
will execute the code first migrations 
from the config file. But, since we have 
taken care this explicitly from our code 
base, hence I keep this checkbox 
unselected. Now, when I click on next 
screen, it will give me preview screen 
as shown below. 



Publish Web 


Profile 

Connection 


Settings 



Production * 

Your application will be published to: 
C:\Rahul\Published\MovieReview .zip 

Databases 


© No databases are selected to publish 


X 


Then, I'll click on Publish button. Then 
all the files get packaged up together, 
and upon successful publish, it will 
produce the result in the Visual Studio 
itself. 



Output 
Show output from: [ Bu 

2>C : \Rahul\Publis 
.......... Publis 






Now, I'll open the cmd prompt in 
administrator mode and then navigate in 
the directory wherein I placed the zip 
file as shown below. 



So, when I type the command 



“Movie Review. deploy, enter, then it will 
open a little help window wherein it 
will have all different sort of parameter 
definition which can be used for 
deployment. 



Now, if run the same command with the 
parameter “/T\ It will just check 
whether everything is perfect or not, 
whether any error is there or not like 
shown below. 


I°|E> 



Now, everything looks fine, so I can go 
ahead and run the command using “/F” 
so that it will deploy the same on the 
web server. Now, once this is done 
successfully, then it will add one new 
site at the specified location as shown 
below. 


a |«J WN7X64-1B3R5Z1 (AMERICAS\Rahul_Sahay) 

j Application Pools 

a Sites 

a ^ Default Web Site 
» Account 
> -Qj aspnet_client 
Cart 

>■■[0 MovieReview 


Now, when I navigate to this site, then 
this will produce me the below error. 


G*. P-g = »|g„- LJ 


Server Error in '/MovieReview' Application. 



Cannot open database "MovieReviewRelease" requested by the login. The login failed. 
Login failed for user IIS APPPOOL\DefaultAppPool'. 


Now, my application is trying to connect 
to the database, but couldn't get there, as 
it doesn't have the permission of the 
same. And this is because the IIS worker 
process runs under the identity “7/5 
APPPOOL And, currently this user is 
not having the permission. So, to grant 
the same, I'll go to the “£<// Server 
Management Studio ”, I'll create a new 
Login for this account and grant 
permissions to this as shown below. 



Object Explorer 

T ^ X 

Connect’ ^ 

Tg]^ 


B [iJ Asqlexpress (SQL Server 10.0.2531 - AMERICA 
B Ljk Databases 

(+1 CM System Databases 
El □ MovieReview.Models.MovieDb 
El (I MovieReviewRelease 
El CM Security 


B CM Q 

A 

A 

A 

S 

A 

S 


New Login., 
Filter 


Start PowerShell 


Reports 

Refresh 


.ogir 

gin#? 


1ESS 


E) CM Server Roles 
(+) CM Credentials 
B CM Server Objects 
E) CM Replication 
E) CM Management 


g Login - New 



Then, I'll come in the User mapping tab 
and select the newly generated db and 
then grant the following permissions to it 
as shown below. 


Login - New 
Select a page 

'Jf General 
^ Server Roles 
User Mapping 
^ Securables 
^ Status 


Connection 


^Script ▼ I2| Help 


Usere mapped to this login: 


^ View connection properties 
Ready 


0 

0 

n 

Database 

master 

model 

Movie Review . Models .... 

User Default Schema 


m 

i Movie Review Release 

IIS APPPOOLXDefaultA... 

□ 

□ 

msdb 



0 






DC 


Then click ok. Now, when I come back 
and refresh the browser, then it will 
produce me the below result, now with 
valid movie names but this time from 
site hosted on IIS. 



Now, if you see the folder in IIS, you 
will see that it's not having the C# code 
or Controller's code, reason being that 
all application logic is compiled and 
embedded in the dll which sits in the bin 
folder as shown below. 






Deployment on Azure:- 

Now, in this section, I am going to 
deploy on Microsoft's Cloud and that is 
Azure. Now, to get started I'll navigate 
to “ http://www.windowsazure.com ” and 
this will produce me the below page. 


*■ e 




* ! 



The cloud for modern 


Move faster 
Save money 
Integrate on- 


Now, there are two things, One is Free 
Trial which I highlighted above. So, this 
is the option for 1 st time users, where in 
Microsoft is providing its Cloud 
services for free for a month. And for 
registered users, you can use the Portal 
Link shown above. Now, once logged in 
with your Microsoft Account, you will 
land up in the dashboard page. 



Microsoft Azure 



You have no web sites. Create one to get started! 

CREATE A WEB SHE (5) 


So, as you can see in the dashboard 
page, you could host multiple things in 
cloud platform. So, the intent of using 
cloud is start small and then scale big. 
So, basically you are going to billed for 
the actual resources you are using. And 
this tool is really nice. It gives you the 
complete picture of your site utilization. 
So, as you can see in the above screen 
shot in the side menu. You can have 



Virtual Machines, Host Mobile 
Services, Cloud Services then SQL 
Databases, Media Services and many 
more things. So, here I'll go ahead and 
create a new website with a database as 
shown below. 



\m ‘ow,,, 

wtssne ^ quick create Create a web site with additional 

d “ 

tt° ' pp5tRVK:c 

i s 

options, such as a new or existing 

victual MRoiKE cusion create ® database, or with continuous 

, „ deployment from source controL 

B ■— »”= an 

0 « 


Now, I'll provide the following 
parameters in there. Currently, I am 
using “AzureWebsites.net ” , but I can 
change this by just providing the “DNS” 



of my hosting provider. But, for demo 
purpose that's ok. Then I am going to 
select the region for hosting provider 
and in the end I'll create a new SQL 
Database for my site from the dropdown. 


NEW WEB SUE - CUSTOM CREATE 

Create Web Site 


X 

URL 

MyMovieReview 

WEB HOSTING PLAN 

© .azurewebsites.net 


Create new web hosting plan 

: 


REGION 

West US 
DATABASE 

- 


Create a new SQL database 
DB CONNECTION STRING NAME Q 



MovieReviewdb 



□ Publish from source control © 


© 


2 


Then, I provide the database settings as 
shown below. 



NEW WEB SITE - CUSTOM CREATE 




Specify database settings 

NAME 

MovieReviewDb 


SERVER 


New SQL database server 


SERVER LOGIN NAME 
rahulsahayDb 


SERVER LOGIN PASSWORD CONFIRM PASSWORD 


REGION 


West US 


□ CONFIGURE ADVANCED DATABASE SETTINGS 


5 5 


Now, as you can see in the screen shot I 
have created a new SQL Database 
Server with the above mentioned 
parameters. Now, I can also configure 
advanced database settings, by selecting 
the checkbox shown in the screenshot. 



Now, this is the place where in I can go 
ahead and select my database size, what 
edition I am targeting means whether it's 
a Web Edition or Business Edition. 
Now, with all these settings in place I 
click on check mark to complete the 
settings, then it will produce me the 
below result. 



So, you can see here, that my website is 
created with the default setting, now I 
can browse this as well by clicking on 
the URL link as shown above, but it will 
produce me the default page as shown 
below. 



This web site has been 
successfully created 

There's nothing here yet, but Microsoft 
Azure makes it simple to publish 
content with GIT , FTP or your favorite 
development tool such as Visual Studio, 

Visual Studio Online or WebMatrix 


Also, if you click on the link as shown in 
the dashboard page, then it will open me 
a descriptive link for my newly created 
setting. 




Now, as you can see here in the above 
screen shot there is a link, which is 
having all the settings related to your 
newly created site. So, when you click 
on this link, it will download one big 
xml file, which will have all the settings 
related to your website. Now, for 
publishing your site, you need to go into 
Visual Studio and click publish and this 
time you need to choose that xml file 





which you have downloaded as shown 
below. 


Publish Web 


Publish Web 


Profile 


Connection 

Settings 

Preview 


Select or import a publish profile 


Manage Profiles... | 


J | Import... | 


Publishing to Windows Azure Web Sites? Sion up for a free account 
Find other hosting options at our web hostino gallery 




Now, click on the import button next to 
the drop down and then it will have all 
the required settings for Azure in there. 





Settings 

Preview 


MyMovieReview - Web Deploy * 

Publish method: | Web Deploy 


Server | waws-prod-bay-013.publish.azurewebsites.windows.net:443 

Site name MyMovieReview 


User name SMyMovieReview 

Password: ••••••••••••••• 


fyl Save password 

Destination URL: http://mymoviereview.azurewebsites.net 

| Validate Connection | © 


Now, when I do next it will provide me 
the settings page. Now, in this page I 
don't want to change any setting, so I'll 
just go and click next. Then I'll click next 
to go in the preview page as shown 
below. 




Publish Web 


Publish Web 


Profile 


MyMovieReview - Web Deploy * 


Connection 


Settings 




Databases 


© No databases are selected to publish 


So, here I can do preview as well. But, 
that's ok. I'm hoping everything will be 
fine, hence directly clicking on publish 
button. Now, since this is going on 
internet, hence this will take some time. 
Upon successful completion when I go 



ahead and refresh the site, it will 
produce me the desired result. 



So, as you can that now your app is live 
and ready to be exposed to internet 
users. 

Note:- 1 have changed the URL later 
after Final Deployment as you can see in 
the above screen shot as this looks more 
meaningful. So now the URL is 
f http://mymoviereviews.azurewebsites.n( 





Also, later on, I may take this site offline 
as I hosted this only for demo purpose. 
Also, you can download the same code 
from GitHub 

f https:// github.com/rahulsahayl 9/Movie- 
Review V 


Summary:- 

So, in this section, we have seen various 
configuration related settings, how to 
override the same. How, the hierarchies 
of these settings follow the path. We 
have also seen how to use custom 
settings in our application. Then, we 
have made some deployment related 
changes to our application and then 


deployed the same on IIS 1 st and then on 
Azure. So, ultimately we have covered 
two deployment options one for intranet 
and the other one for Internet. 



Chapter 11: 
Routing Basics 

WHAT DO you find in 
this CHAPTER? 


=> Introduction 


=> Route Definition 


Areas 


=> Ignore Routes 

=> Debugging Routes 

=> Constructing URLs from 
Route 

=> Route Data 
=> Route Constraints 
=> Summary 

Introduction:- 


As promised earlier in the starting 
chapters, that we'll delve under the hood 


of Routing, So, we have come to routing 
chapter to understand the routing 
principle and why this is one of the most 
important topics which need special 
attention. So, one important point to note 
here is that routing is not only limited to 
ASP.Net MVC as we discussed already 
while creating our 1 st controller. 

Now, as we progresses we have 
understood the fact that file system is not 
the case with MVC based frameworks. 
So, basically in these cases, it takes 
certainly a different approach by 
mapping URLs to controllers' methods 
rather than some physical files. Routing 
in ASP.Net MVC Framework basically 
serves two main purposes. 



• It matches the incoming request 

which is going to be matched 
against one specific 
controller’s action. 

• It also constructs URLs which 

corresponds to controller 
actions. 

Now, one more important concept I 
would like to clear here that Routing is 
different from URL Rewriting. So, URL 
Rewriting is basically focused on 
mapping one URL to another URL. This 
approach is basically applied at those 
places where in user is converting old 
URLs to new ones just to make the URL 
user friendly. On the other hand routing 
is entirely focused on mapping a URL to 



a resource. Another difference in this 
case is that Routing also helps in 
generating URLs using the mapping rules 
that it uses to match the incoming URLs. 
On the other hand, URL Rewriting only 
applies to incoming request and doesn't 
generate any new URL. 


Route Definition:- 

Any ASRNET MVC application needs 
at least one route to define how the 
application should work. Now, in large 
enterprise application, one could have 
multiple routes defined in their 
application. In this section, we'll discuss 
how to define routes. Route definitions 


start with the URL pattern, which 
specifies the pattern that the route has to 
follow. Along with the route URL, routes 
also specifies default values and 
constraints for the various parts of the 
URL. A route can also have a name 
associated with it. 

So, as soon as we create any ASP.Net 
MVC application, you will notice in the 
“ Application Start” event, there is a 
call to register the routes. So, when you 
inspect this, this will open a file 
“ Route Con fig. cs ” under ‘ ‘App Start' ’ 
folder. So, inside “ Global.Asax ” file 
“Route Con fig. Register Routes (Route Ta 
there is a call using “Register Routes” 
method which is registering all the 


routes for the application. So, now this 
method is moved in a separate file under 
“ App Start ” folder as shown below. 


public class RouteConfig 

{ 

public static void RegisterRoutes(RouteCollection routes) 

{ 

routes . IgnoreRoute( "{resource} . axd/{*path!nfo}" ) ; 


//Movie/Avatar 

routes .MapRoute( "Movie", "Movie/{name}", 

new{controller="Movie" , action="Search" , name=UrlParameter . Optional }) ; 

routes. MapRoute( 

name: "Default", 

url : "{controller}/{action}/{id}", 

defaults: new { controller = "Home", action = "Index", id = 

UrlParameter .Optional } 

)j 

> 


Now, let's discuss “ MapRoute ” method 
here 1 st . so, basically it takes the route 
name with URL pattern for the route. 
Now, later in this chapter we will 
discuss Route name separately. But for 


now just focus on the pattern as shown 
below in the table. 


URL 

Parameter Values 

htto://localhost/MovieReview/Movies/Details/1 

1 st Parameter = "Movies” 


2 nd Parameter = “Details” 


3 rd Parameter = "1” 


So, as you can see above the route code 
will parse the URL into a dictionary of 
keys and values which is stored in 
‘ Route Value Dictionary? ’ . Now, if you 
look closely the URL, it is composed of 
various segments. A segment is nothing 
but values between slashes (/). So, in the 
pattern matching rule, you can see that 
1 st parameter is picked up as controller, 
then action method and then id. So, here 
for this URL invocation my below 
method is getting invoked 


// 

// GET: /Movies/Details/5 

public ActionResult Details(int id = 0) 

{ 

Movie movie = db. Movies. Find( id); 
if (movie == null) 

{ 

return HttpNotFound( ); 

> 

return View(movie); 

} 

Again, this method is getting picked up 
by my “ Default ” route. Now, it is also 
possible that in my route definition, I 
don't have any definition for any action 
method, directly parameter, which is 
there in “ Movie ” route. So, it's acting 
there as a search filter based on the 
incoming parameter. This scenario we 


have already discussed while designing 
the “Movie” route. 

Now, there is also a definition for 
Defaults in the MapRoute section, so it 
basically tells, what would be my 
default values for the route, if user 
doesn't provide these values from their 
side. It includes controller name, action 
method and the default parameter 
values. Now, associated to these default 
values, we also have one important thing 
which is meant for default parameters. 
We are here supplying 
“UrlParameter. Optional”. Although, we 
could have supplied parameter = So, 
in the 1 st case, it won't add any value to 
the dictionary, but in later case that 


parameter is added to the dictionary 
against the empty string value. So, the 
difference is pretty significant. So, at 
various scenarios you may land up in 
exception while extracting null value. 
However, the exact difference with 
demo already explained while designing 
route in previous chapters. 


Areas 

Now, this is again one of the important 
topics of routing. The concept of Areas 
basically introduced in MVC 2. So, 
basically it creates boundaries; to be 
more precise functional boundaries. This 
gives you flexibility to isolate large and 


complex sections into different areas. 
This way it is easier to manage large 
enterprise project. Now, for using these 
areas we 1 st need to register these areas. 
So, Area Routes are basically 
configured by creating classes for each 
area which derives fr om the 
“ AreaRegistration ” class by overriding 
Area Name and Register Area. So, if 
you open “ Global.asax ” file, you will 
find that there is call for registering all 
the areas during the start event. 

Now, there could be scenario wherein 
user may end up having “ Area 
Conflicts ” scenario. This basically 
happens if there are two controllers in 
your project with the same name. You 



might have registered one controller 
within your area and the other one in 
root of your application. But, what will 
happen if there is a call for the 
controller comes irrespective of its 
nature, it will create an ambiguity and 
hence it will land up in exception. In 
order to avoid this scenario, the easiest 
possible way is use unique name of the 
controllers, but if you can't avoid that, 
then you can provide a namespace which 
will be used for locating the controller 
like shown below in the snippet. 


/ /Movie/ Avatar 

routes .MapRoute( "Movie", 

M Movie/{name}", 

new{controller="Movie",action="Search",name=UrlParameter .Optional}, 
new[ ] { "AreaMovie . Cont rollers " }) ; 


Here, the fourth parameter which I have 


specified is basically meant for array of 
namespaces. So, the controller for my 
movie project now lives in 
‘ L A reaMo vie. Controllers” . Now, the 
next thing which we could see here is 
“ Catch-All Parameter Now, the 
Catch-All parameter allows for a route 
to match any of the parameters passed as 
query string. So, below is the snippet 
which we need to use for this 


routes .MapRoute( "cat chAll", "yourQuery/ {query -name}/{*params}" ); 


And this will be declared in 
“Register Routes” static method. So, this 
can match any of the incoming query 
with following patterns. 


URL 

Parameter Value 

yoiirQueryQuery 1 par am 1 param2 

Params = param 1 paramZ” 

youiQuery/Query 1 par am 1 

Params = "par ami" 

yourQuery Query 1 

Params = still valid 


Ignore Routes:- 

We have also discussed this while 
designing our 1 st route. But, let me 
explain the same in brief. There are 
certain requests which we can prevent 
by defining a route and using 
“ StopRoutingHandler ” class. So, 
basically when a request is handled by 
“ StopRoutingHandler ” class, the 
“ StopRoutingHandler ” class blocks 
any additional processing of the route. 
We use the same in order make sure that 
request don't map to a file on the disk 


and you don't want routing to handle the 
same. 

public static void RegisterRoutes(RouteCollection routes) 
{ 

routes. lgnore("{resource}.axd/{*pathlnfo}"); 

new StopRoutingHandler(); 

} 

So, in the above snippet we are ignoring 
any request which is coming for a 
resource ending with axdT extension. 
Now, since the route is returning 
“StopRoutingHandlerO ” , it will pass 
the request for normal ASP.Net 
processing, which in this case falls 
under normal HTTP Handler mapped to 
handle the axd ” extension. 


Debugging Routes:- 


Now, this is the place which I enjoy 
most. I use “ Glimpse ” to debug my 
routes. Glimpse is like “ FireBug ” client 
side debugger; only difference here is it 
takes care of all server side codes, its 
Network, Routes, Actions, Traffic 
everything. So, I must say that Glimpse 
is one of the most important tools. 
Developer must have in his/her 
development box. For me, Actually 
Glimpse gives Clarity in order to 
understand routing better, it gives me 
exact picture like which was the 
controller invoked, what was the action, 
which routing principle picked up and 
many more thing. You can install 


Glimpse both ways via “ Nuget or via 
Pacakage Manager Console Window ” 
So, you can install Glimpse via 
powershell command “ Install-Package 
Glimpse.Mvc4 ” as I amusing MVC 4 
version for development. For different 
versions, different versions of glimpse 
are available. 



So, once successfully installed, it will 
open readme file in Visual Studio as 
shown in the below screen shot. It will 
have general instruction that how to 
enable Glimpse in your application. 


Readme- Glimpse -...latfcrm of the web « >: 

URL: http://getglimpse.com/'Version/lnstalt/?Gljmpse.Mvc4=15.3&GNmpse.AspNet=1.81 

You've successfully installed glimpse, so now what? Browse to If you prefer, you can create 

http : //your-application-url/Glimpse . axd and click the "Turn Glimpse On" bookmarklets to turn Glimpse on and 

button. off: 


Then, simply run your application. When you page reloads, you will see 
Glimpse at the bottom right of you page. T o launch the full panel, simply click 
on the logo that will be in the bottom right! 



LSI 


In Firefox just drag the button 
onto your bookmarks toolbar or 
choose 'Bookmark This Link' in 
the context menu when you right 
click the button. 

In Chrome just drag the button 
onto your bookmarks toolbar. 

In Internet Explorer 9 just drag 
the button onto your bookmarks 
toolbar or choose 'Add to 
favorites' in the context menu 
when you right click the button. 
Set the 'Create in' drop down to 
'Favorites Bar'. 


So, it basically says that you need to go 
into the root of your application and you 
need to type “ Glimpse. axd” as shown 
below in the screen shot. 


Bookmarklets 



Upon typing that, it will open the above 
shown window, then you need to click 
on “ Turn Glimpse On ” button, and then 
refresh the home page, then one banner 
type tool will be popped up at the 
bottom of the screen as shown below. 

T / U0L> 

Binding Conftg Environment Execution Remote Request Routes Server Trace Views XHR 

Match Area Uri Data Constraints DataTokens 

False E225 {resource} .«xd/{*pathInfo} - - 

True Root {controfcr}/{acbon}/{id} Placeholder Default Value Actual Value 

action Index Index 

id Optional Optional 




So, as you can see in the above screen 
shot, it has all the relative sections for 
server side and currently, it's showing 
the Routes data. You can also use the 
same for execution path as shown below. 
So, currently it's showing the path for 
“ Account/LogOn ”. It is giving the 
complete details in terms of which 
method in that controller has taken what 
time with categories. 

^ /Account/LogOn BOO 

Binding Con fig Environment Execution Remote Request Routes Server Views XHReqeiti 

Key Value 

ExecutedMethods Ordinal Child Category Type Method Tune Elapsed Order Scope Details 

0 False Authorization AccountCon trailer OnAuthonzabonQ ~ 0 ms IntMInValue First 

1 False Action AccountControder OnAcbonExecutingO ~ 0 ms IntMInValue First 

3 False Action AccountContrdler OrvAcbonExecutedO ~0ms int-MinValue First 

A False Result AccountControSer OnResultExecuting() — 0 ms intMInValoe First 

6 False Result AccountControHer OrvResultExecutedO ~ 0 ms int.MinValue Fust 

UnExecutedMethods child Category Type Method Order Scope Details 


So, I find this tool pretty useful in 
debugging and checking the path exactly. 


Constructing URLs From 
Route:- 

ASP.NET routing enables you to 
programmatically generate URLs that are 
based on route definitions. You specify 
parameter values and if it is required a 
route name in that, and ASP.NET 
generates a URL string that 
corresponding to a matching route. So, if 
you change route URL patterns, you do 
not have to change the code or markup 
that generates URLs unless the 
parameters in the patterns are changed. 
Basically, When ASP.NET routing 
constructs a URL; it uses the Lirst route 
which has a pattern that matches the 


parameters which you provide, unless 
you specify a route name. If you specify 
a route name, ASP.NET uses the named 
route. 

Below are the steps for generating the 
URL from the Route : - 

Create an instance of 
the “ RouteValueDictionary ” class that 
contains all the parameter values that 
you want to include in the URL. The 
parameters must match a route URL 
pattern. Then, the 

“ RouteValueDictionary ” object can 
include parameters in addition to the 
ones which match a route URL pattern. If 
it does this, those values are assigned to 



the query string. 


Then, Call the “ GetVirtualPath ” method 
of the “ RouteCollection ” class and pass 
the “ RouteValueDictionary ” object in 
order to construct the URL. To indicate a 
specific route, include the route name. 

“ The GetVirtualPath ” method returns a 
“ VirtualPathData ” object. 

And last but not the least from the 
“ VirtualPathData ” object; retrieve the 
“ VirtualPath ” property to get the string 
that represents the URL. 

Now, below is the sample code 
explaining the same. 



RouteValueDictionaiy parameters = 
new RouteValueDictionaiy 
{ 

{ "Releaseyear", "2014" } , 

{ "category", "movie" } 

}; 

VirtualPathData obj = 

RouteTable.Routes.GetVirtualPath(null, "MoviesRoute". parameters); 

HyperLinkl.Navigatellrl = obj.VirtualPath; 


So, what is happening here I have 
created “Route Value Di cti onartf ’ with 
parameters which I have passed to the 
“ VirtualPathData ”. Then, I have 
assigned the same to the hyperlink. Now, 
this way I am creating the URL, from the 
code based on the route parameters. So, 
here is the thing that routes work two 
ways for incoming URLs, it maps the 
request and for outgoing it constructs the 


URL. So, this is the basic difference 
between routing and URL Re-writing. 
URL Re-writing only maps the request. 


Route Data:- 

Now, let's understand what is Route 
Data? So, route data basically contains 
information about the route that matches 
the request. So, when a request for” 

/ Movies/Details/1 ” comes in, the route 
attempts to match the request. If it 
matches, it then creates a dictionary that 
contains information parsed from the 
URL. Specifically, it adds a key to the 
dictionary for each URL parameter in the 
route URL. In the case of 


“ {controller }/{acti on}/ {id}” , the 
dictionary will contain at least three 
keys: " controller ," " action ," and "/</. " 
In the case of’ /Movies/Details/1” , the 
URL is parsed to supply values for these 
dictionary keys. In this case, “ controller 
= Movies ”, “ action = Details ”, and “ id 

= r. 

So, the “ RouteData ” is the property of 
the “ RequestContext ” that is used in 
MVC to keep the route values. 


Route Constraints:- 

Now, in addition to matching a URL 
request to a route definition by the 


number of parameters in the URL, we 
can also specify these values in the 
parameters which meet certain 
constraints. So, if a URL contains values 
that are outside the constraints for a 
route, that route is not used to handle the 
request. You can then add constraints to 
make sure that the URL parameters 
contain values that will work in your 
application. So, now constraints are 
defined by using regular expressions or 
by using instance which implement 
“ IRouteConstraint” interface. So, when 
you add the route definition to the 
Routes collection, you can then add 
constraints by creating 
a “ RouteValueDictionary ” object that 
contains the verification test. The key in 



the dictionary identifies the parameter 
that the constraint applies to. The value 
in the dictionary can be either a string 
that represents a regular expression or 
an object that implements the 
”IRouteConstraint ” interface. Now, a 
fairly good example in this case could 
be referred from the url 
“ http://msdn.microsoft . com/en- 
us/library/vstudio/cc668201 ( v=vs. 1 00). i 


Summary:- 

So, in this chapter we have seen couple 
of important bullet points like what are 
MVC Areas. How this is extremely 
useful in isolating the complex functional 


scenarios; how to register them. Then, 
we have seen how to skip routing for any 
physical file lying on the disk. Then, we 
have seen how to use Glimpse to debug 
the routes. We have also covered URL 
generation from the route. In the end we 
have seen Route Data and constraints. 



Chapter 12: Web 
API and 
Dependency 
Injection 

WHAT DO you find in 
this CHAPTER? 


=> Introduction 


=> Why Web API? 

=> Creating a new empty 
Project 

=> Adding Web API to an 
ASP.Net Project 

=> Creating your 1 st 
controller 

=> Dependency Injection 
=> Implementing POST 
=> Implementing DELETE 
=> Implementing PUT 



=> Summary 


Introduction:- 

So, whenever we are building APIs on 
the web, there are several ways to do 
that. These include 

HTTP RPC: - So, it means using HTTP 
in Remote Procedure call to call 
methods across the web. These verbs 
could be “Get Mo vies, InsertMovies, 
DeleteMovie ” etc, and that each of these 
will have different endpoints with 
different URIs in there. So, this is one of 
the models which we used to follow. 


Restful: - This is another technique, 
which is also popular. It also includes 
the idea of URI endpoints which again 
point to functionality, but here we are 
using Resource URIs instead. So, we are 
using the same in such a way that let's 
suppose we are going against a movie 
endpoint like “Movie” and that is using 
“Get” HTTP Verb to retrieve data and 
again for inserting data doing “Post” 
against the endpoint. So, it also includes 
the concept of “Stateless Server ” and 
“Content-Negotiation ” . Hence, here the 
caller can specify that what kind of data 
is interested in. So, there is no 
compulsion of single server, so it can 
better scaled up. 



HATEOS: - It stands for “Hypermedia 
as the engine of Application State”. 

Hmm quite a bit long acronym but idea 
here is to extend the REST-based 
interfaces to include things like 
relationships which are called as 
hypermedia. So, the content which we 
are going to receive is again what we 
have been getting with the earlier 
methods, like “ GetMovie ”. So, here may 
be a link to this which can enable you to 
Add a new movie, Fetch a movie and 
many more things. 


Why Web API:- 


So, before jumping to answering this 


question; let's go back and think for a 
minute that what options we had earlier. 
They are:- 

WCF: - This is one of the famous 
concepts of building web service. So, 
here we can take the existing SOAP- 
based stack which exposes and allow 
the same in a way that JSON Objects, or 
non- SOAP Objects to be returned from 
these services. So, WCF is all about 
configuration. But, sometimes this could 
be a tedious job to do. 

ASP.Net MVC: - This is the one which 
could be used to extend the controller 
model to return the JSON data to accept 
HTTP Verbs like Get, Post, Put or 



Delete. This maybe a difficult scenario 
as we often try to match the name of the 
verb inside our action method. And in 
this scenario, there could heavy chances 
that it would lead to name conflict with 
same parameters even though you are 
having different HTTP Verbs. 

ASP.Net Web API: - This one is easier 
to implement because HTTP Verbs are 
directly mapped to these methods. So, 
any method with the name “ Get ” actually 
makes a “Get” request and similarly 
other HTTP Verbs do what they mean. 
And, as it takes clearer and crisp 
convention for exposing each of the 
controllers that are specific to REST- 
based APIs. Now, it also encourages 



separation of what we are mapping and 
what we are designing. So, it means we 
can have controllers more self- 
describing which means we can get the 
idea by just looking at the controllers. 
Now, as far as hosting is concerned, it 
can also be hosted outside “//£”. But, 
one prerequisite here is ASP.Net Web 
API does require .NET 4.0 or above. 


Creating a new Project:- 

So, I'll begin by adding one New MVC 4 
web project as shown below in the 
screen shot. 



New ASP.NET MVC 4 Project 


Project Template 


Select a template: 


Description: 


S3 

S3 

S3 

S3 

Empty 

Basic 

Internet 

Application 

Intranet 

Application 

S3 

S3 

S3 

S3 

Mobile 

Application 


Single Page 
Application 

Facebook 

Application 


An ASP.NET Web API Project. 


View engine: 


□ Create a unit test project 

Test project name: 

|WebApi.Tests | 

Test framework: 

Visual Studio Unit Test ▼ Additional Info 


Now, here I'll choose a Web API 
project. Now, below is the screen shot 
of sample Web API project in its default 
state. 



Now, if you see the global. asax file, you 
will see that, there's an 
“Application Start” section. 


^ WebApi.WebApiApplication ■ | Q. Application_StartQ 

using System . Collections . Generic; 
using System. Linq; 
using System. Web; 
using System. Web. Http; 

using System. Web. Optimization; 
using System. Web. Routing; 


Ce: For instructions on enabling IIS6 or IIS7 classic mode, 
sit http : //eo ■ Microsoft ■ com/ ?LinkId=9394861 


Offl S public class WebApiApplication ; System. Web. HttpApplication 

{ 

protected void Application_Start( ) 



UebApiConfig.Register(GlobalConfiguration. Configuration); 
FilterConfig.RegisterGlobalFilters(GlobalFilters. Filters); 
RouteConf ig. RegisterRoutes ( RouteT able . Routes ) ; 
BundleConfig.RegisterBundles(8undleTable. Bundles); 


In this section, all the configurations take 
place. So, we can see here there is a call 
for registering ‘ ‘ Web A PI Con fig' ’ . When 
you do “F72” on this call, you will land 
up in a class which sits in “ AppStart ” 
folder. 


As you can see that there is one method 
which will take care of startup 
configuration. The very 1 st thing it does 
is configure default route for Web API. 
So, when it hits the server with a URI, it 
will try to resolve this against these 
routes. Now, it has also created me a 
controller's folder. So, when you open 
the same, you will see 
“ Values Controller ” in there. This is 
pretty much similar to MVC controller. 


But, the basic difference here is that it 
gets inherited fro m ‘ L A pi Controller' ’ 



So, this “ ApiController ” knows that we 
are going to do this HTTP based 
mapping. So, here if a request comes for 
“api/Values”, it is going to look for 
values controller. Now, let's go ahead 
and run the application for a minute. 
Then, it will produce the below output. 



ft @ » 


ASP.NET Web API 


Welcome to ASP.NET Web API! Modify the code in this template to jump-start your 
ASP.NET Web API development. 



Now, if go ahead in the address bar and 
type the URL 

“ http://localhost:ll 791/api/values ” , 
then it will produce me a “Get” result 
but in xml format. 

^ ri 1 localhostll791/api/values 

This XML file does not appear to have any style information associated with it. The document tree is shown below. 


- <ArrayOfstring> 

<string>value l</string> 
<string>value2</string> 
</ArrayOfstring> 


But, I want the same in JSON format, 
now in order to get the same in JSON 
format I need to configure the settings in 
my “WebApiConfig ” . I need to specify 
below two lines of code in front of the 
existing code as shown below. 


namespace WebApi 

{ 

public static class WebApiConfig 

{ 

public static void Register(HttpConfiguration config) 

{ 

//Below formatter is used for returning the DSON result. 

Var appXmlType = 

config. Formatters .Xml Formatter .SupportedMediaTypes . FirstOrDefault(t 
=> t.MediaType == "application/xml"); 


config. Formatters. XmlFormatter .SupportedMediaTypes .Remove (appXmlType); 


config. Routes. MapHttpRoute( 
name: "DefaultApi", 

routeTemplate: "api/{controller}/{id}", 
defaults: new { id = RouteParameter . Optional } 


// Uncomment the following line of code to enable query support for 
actions with an IQueryable or IQueryable<T> return type. 

// To avoid processing unexpected or malicious queries, use the 
validation settings on QueryableAttribute to validate incoming queries. 

// For more information, visit 

http : //go . microsoft . com/ fwlink/ ? Linkld=279712 . 

/ /config . EnableQuerySupport ( ) ; 

// To disable tracing in your application, please comment out or 
remove the following line of code 

// For more information, refer to: http://www.asp.net/web-api 
config . EnableSystemDiagnosticsTracing( ) ; 

} 

} 

} 

Now, when you do build and run then it 
will produce the exact output in JSON 
Format as shown below. 



^ localhost:11791/api/values 


["valuel", "value2"] 


So, if you go back to values controller 
and look at the “Get” method; then you 
will come to know that; this is the 
method which got invoked without any 
additional parameter. Now, let me go 
ahead and try to change the values in this 
method and see whether it's taking the 
effect or not. So, as you can see below 
in the snippet, I have provided my name 
there as value, and same has been 
returned as JSON. 

// GET api/values 

public IEnumerable<string> Get() 

{ 

return new string[] { "Rahul", "Sahay" }; 

} 


^ localhost:11791/api/values 


["Rahul", "Sahay"] 


Now, if I go ahead and look the different 
“Get” method, it takes one id as shown 
below. 

// GET api/values/5 

public string Get(int id) 

{ 

return "value"; 

> 

In our Web API route pattern this Id is 
already specified. But, Id specified after 
the controller is specified as optional 
parameter. So, if I go ahead and invoke 


this URL 

“ http://localhost: 11 791/api/values/r \ 
then it will return the below output. 

^ localhost:11791/api/values/l 

"value " 


So, these are all basically routing 
mechanism, how you have configured it 
in the Web API route structure. 


Adding Web API to an 
existing Project 


Now, in this case, I am going to add Web 


API in my existing project which we 
have already built as “ MovieReview 

So, in this project, 1 st am going to add 
Web API reference in the project using 
the nuget package manager as shown 
below. 



Now, once it is successfully installed, 


you can see in the global. asax file, call 
for registering Web API has been added 
there. 


t 


// visit http : y/eo. microsoft . com/>LinkId=93948ei 


P PP V P PP 




{ ( ^ 6 ' 

} . ' llAr () 


Now, again when you do “F72” on 
register, then it will take you the config 


> 


> 


) 





config) 


?fault(t => t .MediaType == "applicatioa/xml"); 




//conf ig. EnableQuerySupport ( ' ; 


Now, if you can see in the above screen 
shot, by default query support is 
commented. So, basically this is an 
optional support which you can get in 
WEB API to expose an “ IQueryable ” 
input. So, the benefit of this could be that 
it allows you to expose your data as 
“ OData ” feeds. Now, by definition 
“OData is a standardized protocol for 
creating and consuming data APIs. 

OData builds on core protocols like 
HTTP and commonly accepted 


methodologies like REST. The result is a 
uniform way to expose full-featured data 
APIs.” But, I am leaving this currently 
commented as we are not working 
currently with OData. This is extremely 
useful in case you want to support for 
feeds. Now, if you want to delve more, 
you can refer http://www. odata. org/ 
site for the same. 


Creating your I s * 
controller:- 

So, now here I am going to create my 1 st 
Web API controller. Now, I can have a 
different sub folder inside my 


controller's folder for “ Web-APF ’ or I 
can have altogether different folder 
dedicated for WEB API, whichever way 
you are comfortable that's fine. But for 
now I am going to create the new 
controller in the controller's folder 
itself. So, what you need to do is right- 
click on the controllers' folder as then 
add “ Web-APF' controller from the drop 
down as shown below. 



Add Controller 


1^3 


Controller name: 
MoviesAPIController 
Scaffolding options 
Template; 


| MVC controller with read/write actions and views, using Entity Framework 
Empty MVC controller 

MVC controller with read/write actions and views, using Entity Framework 
MVC controller with empty read/write actions 
Empty API controller 

API controller with read/write actions, using Entity Framework 




' r \ [ Advanced Options... 


So, as you can see in the screenshot, last 
three options in the dropdown are 
dedicated for API controllers. Now, 
from these options, I usually prefer 
“Empty API Controller ” and then I 
write my required operations in there. 
So, now I'll create a Get method which 
will get the instance of my “MovieDb” . 



In the later section of this course we'll 
see how to simplify this instance 
creation process. But, for now that's ok, 
and I always believe that you start small, 
test that thing, then apply all sort of 
design patterns to it. So, now, I have a 
Get method and in here I'll get some data 
as shown below. 



Busing System; 

using System. Collections. Generic; 

I using System. Data. Entity; 

| using System. Linq; 
using System. Net; 
using System. Net. Http; 

I using System. Web. http; 

| using MovieReview. Models; 

B namespace MovieReview. Controllers 

{ 

B public class MoyiesAPIContr^JJLer : ApiController 

{ 

private IMovieDb _movieDb; 


B public object Get() 

i 

_movieDb = new MovieDb(); 
var results = 

_movieDb.Query<Movie>() .0rder8yDescending(m => m. reviews. Count()) 

.Select(m => new MovieVieirftodel 

{ 

Id = m.Id, 

MovieName = m.MovieName, 

DirectorName = m.DirectorName, 

ReleaseYear = m.ReleaseYear, 

NoOf Reviews = m.reviews.CountQ 

»; 

return results; 

H 

} 

[> 

Here as you can see in the above screen 
shot, I have just used the same query, 
what I have used earlier in Home 


controller. So, now when I run the app 
and navigate to URL 

http://localhost:1034/api/moviesapi/ . It 


will produce me the below output in 
JSON format. 



Here, you can also verify the same in 
“Fiddler”. Fiddler is a very good tool in 
order to capture the network traffic; here 
we just want to make sure what requests 
have been processed, whether it's 
processed correctly or not. So, Fiddler 
is basically a must have tool for any web 
developer. You can get the same online. 
So, you can see in the below screen shot, 
I have composed a “Get” request from 
the Fiddler, and it returned me a JSON 
object with “200 HTTP Status”. 


Now, when you click on this returned 
object highlighted in the left pane, you 
can see the data returned from the server. 



Dependency Injection:- 


Now, let's talk about Dependency 
Injection. So, this is the stuff which is 
very popular these days in developers' 
arena for obvious reasons. So, let's 
discuss few of them. Now, actually 
dependency injection is well applied 
with repository pattern wherein I am 
using one repository to get hold on my 
database and do all “C7?t/D” operation 
for me. So, if you can see the code I am 
creating a reference of my movie Db. 
Now, here I would like to have a way to 
take these services and supply them to 
controllers. Because in future there may 
be as many services as required, so I 
need a way to simplify these for me and 
dependency injection is the answer to 
achieve it. 



So, here I'll be creating one constructor 
with required interface in there. In this 
case this would be “ MovieDb ” 

Interface. So, if you would have been 
using “Repository Pattern”, then in that 
case, this interface would be for that 
Repository which you would like to use. 
Now, the reason for using these 
interfaces enables you to write tests 
easily against these controllers. Now, 
here I am going to use new local 
variable “ moviedb ” inside my 
constructor 



namespace MovieReview. Controllers 

{ 

public class ^to\/lesAPIContre^^L^^ : ApiController 

{ 

private IMovieDb jgovieDb; 


public MoviesAPIController( IMovieDb movieDb) 

{ 

_movieDb = movieDb; 

} 

public object Get() 

{ 

// _movieDb = new MovieDb(); 
var results = 

_movieDb.Query<Movie>() .OrderByDescending(m => m.reviews.Count()) 
.Select (in => new MovieViewModel 
{ 

Id = m.Id, 

MovieName = m. MovieName, 

DirectorName = m. Director Name, 

ReleaseYear = m. ReleaseYear, 

NoOf Re views = m. reviews. Count () 

})i 

return results; 

> 

> 


Now, if you build the above piece of 
code and try invoking API in the 
browser, then this time, it will result 
error message as shown below. 


And the error here says that controller 
doesn't have the “ parameterless public 
constructor Now, the defaults in the 
Web API are that all of these controllers 
must not have any parameter in it. So, 
we are going to change this behavior by 
allowing dependency injection 
container. Hence, here the technique 
which I am going to use is “ Ninject 
However, you could use any of your 
favorites like “ StructureMap , Unity ” 
etc. So, the job of “Ninject” over here is 
to pass in these dependencies into a 
controller as required. Now, for doing 
the same, we 1 st need to install one 
package, i.e. is “Ninject.MVCS” . Now, 
don't go by naming here, it applies to 
MVC 4 and above as well. 






Clc 


Now, once successfully installed, this is 
going to add one new class in the 
“ AppStart ” folder with the name 
“ NinjectWebCommon.es So, if you 
look at this class you will get the idea 
that this is startup bootstrap class. So, 
when the web server comes and gets 
started, it's going to do its own 


registration. Now, below is the snippet 
for this class. 


[assembly: 

WebActivatorEx. PreApplicationStartMethod(typeof (MovieReview. App_Start .NinjectWebCo 
mmon), "Start")] 

[assembly: 

WebActivatorEx . ApplicationShutdownMethodAttribute(typeof (MovieReview . AppSt art . Min 
jectWebCommon), "Stop")] 

namespace MovieReview. App_Start 

{ 

using System; 
using System. Web; 


using Microsoft . Web . Inf rastructure . DynamicModuleHelper; 

using Ninject; 

using Ninject. Web. Common; 


public static class Nin jectWebCommon 

{ 

private static readonly Bootstrapper bootstrapper = new Bootstrapper( ); 
III <summary> 

III Starts the application 

III </summary> 

public static void Start () 

{ 

DynamicModuleUtility . RegisterModule(typeof (OnePerRequestHttpModule) ) ; 
DynamicModulelltility . RegisterModule(typeof (Nin jectHttpModule) ) ; 

bootstrapper . Initialize(CreateKernel) ; 

> 

III <summary> 

III Stops the application. 

Ill </summary> 

public static void Stop() 

{ 

bootstrapper .ShutDown( ); 

} 

III <summary> 

III Creates the kernel that will manage your application. 

Ill </summary> 

III <returns>The created kernel. </returns> 
private static IKernel CreateKernel( ) 

{ 

var kernel = new StandardKernel( ) ; 
try 
{ 

kernel . Bind< Func<IKernel»( ) .ToMethod(ctx=>( )=>newBootstrapper( ) . Kernel); 

kernel .Bind<IHttpModule>() .To<HttpApplicationInitializationHttpModule>( ); 

RegisterServices ( kernel ) ; 
return kernel; 

> 

catch 

{ 

kernel . Dispose( ) ; 
throw; 


> 


> 


Ill <summary> 

III Load your modules or register your services here! 
Ill </summary> 

III <param name="kernel" >The kernel . </param> 
private static void RegisterServices(lKernel kernel) 

{ 

} 

> 

} 

Here, at the bottom you can see that 
there's a static method 
“RegisterServices” . So, this is the place 
where you are actually going to add the 
code to register the type of services. 
Now, here we can do the same by using 
“ kernel ” object and then we say ‘ Bind ” 
and pass in the interface which we are 
interested in. So, in this case it would be 
“ IMovieDb ” and then bind it to 
“ MovieDb ”. So, it's actually telling here, 


when someone request this; then give 
them the instance of this service. But, 
here again I need to register my context 
as well, because my Interface 
“ IMovieDb ” has interdependency on 
this. So, I need to resolve this as well. 
Hence, the modified code looks like 
below. 


using MovieReview. Models; 


[assembly: 

WebActivatorEx . PreApplicationStartMethod(typeof (MovieReview . App_Stant . Nin jectWebCo 
mmon), "Start")] 

[assembly: 

WebActivatorEx . Applicat ionShutdownMethodAttri but e(typeof ( MovieReview. App_St art .Nin 
jectWebCommon), "Stop")] 

namespace MovieReview. App_Start 

{ 

using System; 
using System. Web; 

using Microsoft . Web . Infrastructure . DynamicModuleHelper; 

using Ninject; 

using Ninject. Web. Common; 

public static class NinjectWebCommon 

{ 

private static readonly Bootstrapper bootstrapper = new Bootstrapper(); 

III < summary > 

III Starts the application 
III </summary> 


public static void Start () 

{ 

DynamicModuleUtility .RegisterModule(typeof (OnePerRequestHttpModule) ) 
DynamicModulelltility . RegisterModule(typeof (NinjectHttpModule)); 
bootstrapper . Initialize(CreateKernel); 

> 

III < summary > 

III Stops the application. 

Ill </summary> 

public static void Stop() 

{ 

bootstrapper . ShutDown ( ) ; 

> 

III <summary> 

III Creates the kernel that will manage your application. 

Ill </summary> 

III <returns>The created kernel. </returns> 
private static IKernel CreateKernel( ) 

{ 

var kernel = new StandardKernelQ; 
try 
{ 

kernel . Bind<Func<IKernel>>( ) .ToMethod(ctx=>( )=>newBootstrapper( ) . Kernel); 

kernel. Bind<IHttpModule>() .To<HttpApplicationInitializationHttpModule>( ) ; 

RegisterServices ( kernel ) ; 
return kernel; 

> 

catch 

{ 

kernel .Dispose( ); 
throw; 

} 

} 

III <summary> 

III Load your modules or register your services here! 

Ill </summary> 

III <param name="kernel">The kernel. </param> 
private static void RegisterServices(IKernel kernel) 

{ 


kernel . Bind<IMovieDb>( ) .To<MovieDb>( ) ; 
kernel. Bind<MovieDb>( ) . To<MovieDb>( ) ; 

> 

> 

> 

Now, if I go ahead and build again, I'm 
going to get the same error as shown 
below. 



So, now why I get the same error. Now, I 
have Dependency Injection as well to 
solve my dependencies. So, to answer 
this question, “/>/” doesn't know about 
Web API by default. Hence, to fix the 
same, I need to go ahead and install one 


more package as shown below. 



Now, this utility is going to help you to 
build the Web API components and 
expose the same against Dependency 
Injection as well. So, now in the 
“NinjectWebCommon ” , I need to add 
settings to support Web API as shown 
below. 


private static IKernel CreateKernel( ) 


{ 

var kernel = new StandardKernel(); 
try 
{ 

kernel . Bind<Func<IKernel>>( ) .ToMethod(ctx=>( ) =>newBootst rapper ( ) .Kernel); 
kernel . Bind<IHttpModule>( ) .To<HttpApplicationInitializationHttpModule>( ) ; 

// Web API settings 

GlobalConfiguration .Configuration . Dependency Resolver=newNin ject Resolver (kernel ) ; 

RegisterServices ( kernel ) ; 
return kernel; 

> 

catch 

{ 

kernel . Dispose( ) ; 
throw; 

} 

> 

Now, with the above piece of code in 
place, when I go ahead build the solution 
and refresh the page, it will give the 
required output. But, this time via 
Dependency Injection. So, basically here 
we have implemented “Get” via 


“ Dependency Injection 



Implementing POST:- 

So, in case of POST, I will be using 
attribute as ‘j From Body]” in my Post 
method. It's basically an attribute which 
you can put directly on parameter. And 
this is going to tell Web API, that we 
want to pass into the Post an object 
model. So, here we would like to infer 
the JSON into an instance of Movie 
Model from the body of the Post. So, 
here my code will look like as shown 


below 


public object Post( [FromBody] Movie movie) 

{ 

try 

{ 


if (ModelState.IsValid) 

{ 

var context = new MovieDb(); 

//Check Duplicate 

if (_movieDb.Query<Movie>( ) .Any(m => m.Id == movie. Id)) 

{ 

return 

Request .CreateErrorResponse(HttpStatusCode.BadRequest, "Entry with the Id already 
exist"); 

} 

context . Movies . Add ( movie ) ; 
context . SaveChanges ( ) ; 

} 

> 

catch (Exception ex) 

{ 

return Request. CreateErrorResponse(HttpStatusCode. BadRequest, ex); 

} 

return Request . CreateResponse(HttpStatusCode . Created ) ; 

} 

Now, if you can see in the above code, I 
have also used couple of things, like I 


took one instance for my context class 
just to commit the changes, then I also 
make sure that I won't be able to commit 
duplicate values to the db, Then if 
everything goes well, then I am just 
returning the HTTP Status code created, 
else Bad Request. 

Here, let me explain the same using 
fiddler. So, as you can see below in the 
screen shot, I have composed a POST 
request in the fiddler, and when I click 
on Execute button, and then it will come 
in my debugger. 



(2) Statistics | jj$j Inspectors | f AutoResponder A Composer Q FI ter s | _| Log | — ■ Tmefcne 



Parsed [r^w | Options 


POST » http:/^ocathost; lOIF/apn/moviesapi HTTP/1.1 


Request Headers 




Jser -Agent: Fidder 
-tost: localhost: 1034 

Content-Type: appticabon/Ison; charset=utf-8 
Content-Length: 81 


luestBody 

(Id': 12,'MovieName':TlDU','DirectofSame':'Aaditya Chopra ','ReleaseYear":'1994"} 


if (ModelState.IsValid) 


- * movie Movieftevre ' - dels 11 : , 


Q.-”Aaditya Chopra" 


Aid 

12 


A MovreName 

Q. - "DDU” 


A ReleaseYear 

Q. - '1994" 


A reviews 

null 


= movie. Id)) 
ponse(HttpStatusCode. BadRequest, "Entry wit 


} q P° < P 

return Request . CreateResponse(HttpStatusCode .Created) ; 


So, as you can see in the debugger, it 
came with following values, which is 
passed from the fiddler, and reviews is 


coming null, because that collection I 
didn't pass. Now, once everything goes 
well, it will commit the same with 
following values and same will be 
reflected in db as shown below. 



M 0 vie 5 C 0 ntr 0 ller.cs HomeController.es 


a ! % 

Max Rows: 1000 

3 U & 



Id 

MovieName 

DirectorName 

ReleaseVear 

► 

3 

Godzilla 

Gareth Edwards 

2014 


2 

Avatar 

James Cameron 

2009 


3 

Titanic 

James Cameron 

1997 


4 

Die Another Day 

Lee Tamahori 

2002 


12 

DDL! 

Aaditya Chopra 

1994 

* 

NULL 

NULL 

NULL 

NULL 


MovieDb.es 



And in application; it will also reflect. 
Now, let me try re-execute the same Post 
body, this time I am trying to put the 
values with the same id, then in this case 
it should throw me an exception as 
shown below. 


//Check Duplicate 

if (_movieDb.Query<Movie>() .Any(m => m.Id = movie. Id)) 

{ _ _ _____ 

return Request. CreateErrorResponse(HttpStatusCode.BadRequest, "Entry with the Id already exist"); 

} 

context . Movies . Add (movie) ; 
context . SaveChanges ( ) ; 

} 

> 

catch (Exception ex) 

{ 

return Request. CreateErrorResponse(HttpStatusCode.BadRequest, ex); 

> 

return Request. CreateResponse(HttpStatusCode. Created); 



public object Post([FromBody] Movie movie) 


try 


t 


} 


So, this is how POST method works, 
now let's go ahead see how Delete 
works. 


Implementing DELETE:- 

Now, in this section, we are going to 
implement Delete method. So, below is 
the snippet of Delete implementation, 
and again this implementation is fairly 
simple. So, here I have passed Id as 
parameter to the method. So, now based 


on this parameter it will go ahead and 
delete the record from the database. 


public HttpResponseMessage Delete(int Id) 

{ 

try 

{ 

if (ModelState. IsValid) 

{ 

var context = new MovieDb(); 

//If Id Not found 

if (_movieDb.Query<Movie>( ) .Any(m => m.Id == Id) == false) 

{ 

Return Request .CreateResponse(HttpStatusCode.NotFound, 
"Record Not found with the ID supplied"); 

> 

//else delete 

if (_movieDb.Query<Movie>( ) . Any(m => m.Id == Id)) 

{ 

Movie movie = context. Movies. Find (Id); 
context. Movies. Remove (movie) ; 
context . SaveChanges ( ) ; 


> 

> 

} 

catch (Exception ex) 

{ 

return Request .CreateErrorResponse(HttpStatusCode. BadRequest, ex); 

> 

return Request . CreateResponse(HttpStatusCode . OK ) ; 


Here, again in the 1 st section of this 
code, it is trying to delete the record 
with the supplied id, but if record not 
found, then it will simply return Record 
Not Found Message. Otherwise, it will 
go ahead and delete the record from the 
database. Now, let's see the same in 
action. So, if you have noticed here, I 
have changed the verb from the 
dropdown and also passed id as 
parameter in the URL. 


Now, when I click on Execute, then it 
will go ahead delete the desired record 
from the database as shown below. 



Then, it just returned the 200 status code, 
saying record deleted and all ok. 



Now, you can verify the same in the 


browser as well or in the database as 
shown below. 



Now, since I have already deleted the 
record and when the same record 
supplied again, then it will produce the 
below result. 





Now, let's go ahead and check the PUT 
Implementation for the same. 


Implementing PUT:- 


So, basically you are going to use PUT, 


when you need to update some resource. 
This is also simple implementation. So, 
as you can see in the below snippet, it is 
1 st checking whether the id supplied is 
valid or not. 

public HttpResponseMessage Put(int Id, [FromBody] Movie movie) 

{ 

try 

if (ModelState. IsValid) 

{ 

var context = new MovieDb(); 

//If Id Not found 

if (_movieDb.Query<Movie>( ) .Any(m => m.Id == Id) == false) 

{ 

Return Request .CreateResponse(HttpStatusCode. Not Found, 
"Record Not found with the ID supplied"); 

> 

//If Id found, then go ahead and update the record 
if (_movieDb.Query<Movie>( ) .Any(m => m.Id == Id)) 

{ 

context . Movies . Add ( movie ) ; 
context . SaveChanges ( ) ; 

> 

> 

> 

catch (Exception ex) 

{ 

return Request .CreateErrorResponse(HttpStatusCode. BadRequest, ex) 

> 

return Request . CreateResponse(HttpStatusCode. OK); 

> 


Now, as you can see in the below 
screenshot, I have updated the record 
with id = 13, as shown below. 


MoviesController.es HomeController.es 


M | % 

Max Rows: 1000 

3 0 5) 



Id 

MovieName 

DirectorName 

ReleaseYear 

► 

a 

Godzilla 

Gareth Edwards 

2014 


2 

Avatar 

James Cameron 

2009 


3 

Titanic 

James Cameron 

1997 


4 

Die Another Day 

Lee Tamahori 

2002 


13 

DDL) 

Aaditya Chopra 

1994 

* 

NULL 

NULL 

NULL 

NULL 


MovieDb.es 


So, here I'll go ahead and change the 
director name to “Yash Chopra ” from 
fiddler as shown below. 



*t Replay X- ► Realms t Stieam jigg Decode ; Keep: All sessions - 0 Any Process Find &£Save 6* g§8io«se ^ Clear Cache ^TewWiaaid jfiTearoff | M5DN Search... ip @ Online X 





Now, when I execute, then it will come 
in the debugger and update the record as 
shown below. 



Then, it will just update the record as 


shown below. 



So, here we have seen Web APIs in 
action. Now, with this I would just like 
to wrap this session here. 


Summary:- 


So, in this chapter, we have seen some 
of the quite useful features supported by 
MVC like Web API and Dependency 


Injection. We have implemented Web 
API right from the scratch in our project. 
We have also seen what are the pre- 
requisites required to Implement Web 
API. We have also implemented 
Dependency Injection to simplify the 
process. We have used third party 
component like Ninject to implement the 
same. Now, in the coming chapter, we'll 
take this base model and make the site in 
such a way that it should support Mobile 
sites as well. 



Chapter 13: 
Making a Mobile 
Site Using 
JQuery Mobile 

WHAT DO you find in 
this CHAPTER? 


=> Introduction 


=> Setup 

=> Viewports, Widgets and 
Attributes 

=> Themes and Swatches 
=> Media Query 
=> Layouts and Pages 
=> Collapsibles 
=> Grids and Buttons 
=> Forms 
=> Summary 



Introduction:- 


Hi Friends, now in this section we are 
going to cover JQuery Mobile feature. 
JQuery mobile is a JavaScript library 
which builds on the top of popular 
JQuery library So, it allows you to 
build web applications which work on 
all type of Mobiles, Desktops, Laptops 
and many other devices. So, in this 
section, we are going to add mobile 
feature in the existing ASP.Net MVC 
application which we have built so far. 
So, the library required to support these 
features is available in “ JqueryMobile ” 
which can be downloaded from 
http://Jquerymobile.com . It is also 
known as “ JQM\ Now, JQM provides 


you a unified user interface system 
which means it does have some set of 
rules which you have to obey throughout. 
Most of the hard work is taken care by 
JQM itself. Features like Async Page 
Navigation, Progressive Enhancement, 
Responsive Design, Touch Support, 
Theming etc. are supported by default. 
So, let's go ahead and get started. 


Setup:- 

So, obviously before jumping into 
development of mobile features; we 
need to download the library 1st. so, one 
way to download the scripts directly 
from the JQM site as shown below. 


i jQuen / 

* mobile 


A Touch-Optimized Web Framework 

jQuery Mobile is a HTML5-based user interface system 
designed to make responsive web sites and apps that are 
accessible on all smartphone, tablet and desktop devices. 


Download jOuery Mobile 


Now, before directly jumping to convert 
the existing application into JQM 
version, let's understand few basics with 
a sample plain example. So, here as you 
can see below, I have one plain html 
page in a fairly simple web application. 
Now, obviously my favorite way of 
installing any third party software via 
nuget itself. 




So, once you have successfully installed 
the package, you could see the related 
contents in your solution explorer. 



So, in order to get started, we need to 
include style sheets and scripts on the 
page as shown below. 


■lns=" http://www.w; 


<link href =”Content/jquery . mol 

<script sre»"Scripts/jquery.mi 
<title>Hello 3QH</title> 


rel=-stylesheef /> 
t/*cript> 


I 


Now, if I simply go ahead and run the 
app, then it will produce the below 


output. 


So, as you could see in the screen shot, 
JQM theme applied to that “<p>” 
element. But, in order to harness the 
actual potential of JQM; let's apply more 
settings. Now, let me modify the code a 
bit, now I am going to provide certain 
widget as seen below. 


HtmlPagel.html « X H 

1 < ! DOCTYPE ht»l> 

2 EKhtml xmlns a " http://www. w3.org/1999/xhtml ' 


* 


<link href="Content/jquery. mobile-1. 4. 2. css" rel="stylesheet" /> 
<script src="Scripts/ jquery-1 . S . 3 . js"x/script> 

< script src="Scripts/jquery. mobile- 1 . 4. 2 . js"x/script> 
<title>Hello 3QM</title> 



<p>Hello JQH</p>| 



n </body> 
18 </html> 


Now, these data-role applied 


page/content wise. Now, if I go ahead 
and refresh the page again, you will see 
visual difference applied to the content. 


O 0 localhost:48045/HtmlPagel.html 


Hello JQM 


So, these Data -(dash) attributes are 
actually HTML 5 specifications. So, this 
says that you can apply any number of 
custom specifications as you want. Also, 
these data- attributes work well with 
older browser as well. So, in order to 
get more idea about HTML 5 
specifications, you can refer 
“ http://www . w3. org/TR/html5 So, 
here our scripts are capturing these data 


- attributes and outputting the results. 
So, obviously you can add your custom 
attributes and write the script to handle 
the same. Now, let me add one header 
here, to at least get the look and feel off 
Mobile menus. 


1 <!DOCTYPE ht«il> 

2 EKhtwl x»lns=~httg; //W.W? . grg/l999/nhtmr> 


<link href-“Content/jquery. mobile-1. 4. 2. ess“ rel-"stylesheet" /> 
< script src““Scripts/jquery-1.8.3. js n ></5cript> 
cscript src="Scripts/jquery. mobile-1. 4. 2. js - x/script> 
<title>Hello 3QM</title> 



20 [ </body> 

21 [</ht«l> 


Now, when I save the same and refresh 
the page, it will produce the below 
output. 


C - locahcsl ; L HI 'ilpagal.'ilrnl 


—p: 5 


View Ports, Widgets and 
Attributes 

Now, let me go ahead an open the url in 
( http://www. responsinator. com ). Now, 
Responsinator is basically a testing site 
to test your UX in different browsers 
with different virtual devices. So, as you 
can see below in the screen shot, I have 
pasted my localhost URL in there and 
ran it, then it loaded different views in 
different devices, and apparently it 
appears to me, that the content is zoomed 
out, is not pretty to eyes. 




Getting Started 

Hello JQM 


Getting Started 


o 


□D 


iPhone 3+4 landscape ■ width: 48opx 


Getting St... 

Hello JQM 


Crappy Android portrait ■ width: 240PX 


Now, by default all the web pages are 
designed basically to be best viewed in 
the desktop sized screens, hence when 
you are seeing the same in smaller 
devices, it appears to be very small in 
size. Now, in order to fix this we have a 
very fine solution and that is called 
“ ViewPort ”. Now, view port Meta tag is 
basically an instruction for web 
browsers, so they are going to detect this 
setting and do the same as specified in 
this Meta tag. Also the tag allows you to 
control the size and scale of the 
viewport. So, in the below view port 
definition I made sure that Zoom level is 
set to 1, which means neither zoomed in 
nor zoomed out and also set the width to 
device width which means it will get 



automatically adjusted whatever device 
it gets opened. 



Now, this Meta tag is only detected by 
the mobile browsers, which are not 
going to make any difference to desktop 
version of the page. Now, let me go 
ahead and add some more content to this 
page. Let's add menus in there. 




• Mo vie Rev iew* 


But, in mobile browser, it would appear 
like 


Getting Started 


• Movie Reviews 

• Microsoft 

• Amazon 


iPhone 3+4 landscape ■ width: 48opx 


And responsinator is smart enough to 
detect your events. So, if you click on 
any of these links, it will open here as 
shown below. 


ISelect One 


Home 

About 

Contact 

Movies 



iPhone 3+4 landscape ■ width: 48opx 


So, currently the site which we have 
developed is not best optimized for web. 
But I will do in this segment. But, for 
now just stick to the basics. Now, 
currently I can see unordered list in the 
browser, but I can also assign the same 
with data role list view as shown below. 




ix/li> 


24 [ </body> 

25 [ </html> 


<lixa href =" http : //myiroviereviews ■ azurewebsites . net/ " >Hovie Reviews</a 
<lixa href //www, B'i<;rc}gft,<:gip">Hlcrosoft</ax/ll> 

<lixa href="http: //www. agazon ■ coin->A«iazon</ax/li> 


Now, when I save the page and refresh 
the same, it will produce the below 
effect. 


■* C 13 


o 

o 

© 


Now, if you open the same in mobile 
browser, it will appear like below 


Getting Started 


Movie Reviews 

Microsoft 

Amazon 


o 

© 

© 


iPhone 3+4 landscape • width: 48opx 


So, here it will also have hover effect 
when you hover on any of these icons. 
Now, I can also apply some margins and 
rounded corners by using widget as 
shown below. 







Now, when I save the same refresh the 
browser, I can see the effect. 


Getting Started 


Movie Reviews 

O 

Microsoft 

O 

Amazon 

O 


0 


iPhone 3+4 landscape ■ width: 48opx 


Here, I can also go ahead and add some 
filtering option by using the “ data 
attribute as shown below. 


■w3.org/1999/xhtml "> 

cmeta name«"viewport" content“"width=device-wdith, initial- seal 
clink href=”Content/jquery. mobile-1. 4. 2. css" rel=”stylesheet" 
cscript src="Seripts/ jquery-1 .8.3 . js*x/script> 
cscript src="Scripts/ jquery . mobile-1 .4. 2 . js”x/script> 
<title>Hello 3QM</title> 


ediw data-role=“page"> 

ediv data-role="header”> 

<hl>6etting Started</hl> 
</div> 


ediv 

<ul data-rol 

clixa h 
</ul> 

</div> 


-“ http :/ /myircvie rev iews . azure^i 


' ” >Movie Reviews</ax/li> 


So, now this will add filtering option 
with watermark in it. 


Getting Started 

Q. Filter items... 


Movie Reviews 

o 

Microsoft 

o 

Amazon 

o 


iPhone 3+4 landscape • width: 48opx 


And, here you don't have to write any 
script to filter the content; this is already 
handled in JQM. So, if you type in some 
values, then it will work like shown 
below 


Getting Started 


Q. mo| O 

Movie Reviews 


iPhone 3+4 landscape • width: 48opx 


Themes and Swatches:- 

So, at any point if you don't like the 
theme and you want to change the same, 
certainly you can do that. So, basically 
JQuery Framework comes with a theme 
framework which is implemented in 
CSS and it supports 26 different color 


combinations. 



So, as you can see in the above screen 
shot, you can pick any of these themes 
and apply the same in your site. Now, 
these sets of color are called 
“ Swatches ” and has letters associated 
with them like “A, B, C, Now, here 
you can customize your color 
combinations with color picker tool as 
well. So, in your application if you open 




the CSS file which we have included in 
our web page and search with the text 
“ Swatch ”, you will come to below 
shown point 



So, like these we have many settings for 
different swatches. Now, swatch is 
nothing but a set of CSS rules for 
different visual appearances. So by 
default our application is using “ Swatch 
A” theme. But, now I would like to go 


ahead and override one of the swatches. 
Let me override it for header. Now, in 
header I would like to use black theme. 
So, for doing this I will again use data- 
attribute as shown below. 


HtmlPagel.html -B X U 

1 < ! DOCTYPE html> 

2 EKhtml xmlns=" http : //www.w3 .org/1999/xhtml "> 

3 <head> 


3 

9 <n 

10 <body > 

11 


<meta name=" viewport" content="width=device-wdith, initial -scale=l“/> 
clink href-"Content/jquery. mobile-1. 4. 2. css" rel-"stylesheet" /> 
Cscript src=“Scripts/ jquery-1 .8.3 . js"x/script> 
cscript src="Scripts/ jquery .mobile-1.4. 2 . js"x/script> 

<title>Hello 3QM</title> 


</head> 


12 


B 


<div data-role="page": 


/ data-role="page"> 

<div data-role="header" data- 



data-theme="b"> 



</div> 

<div data-role=”content"> 


20 

\ 21 


<ul data-role=”listview" data-inset="true” data-filter="true”> 

clixa href =" http : //rnymoviereviews ■ azurewebsites ■ net/ " >Hovie Reviews</ax/li> 
Clixa href=“ http: //wivw.microsoft.com ">Hicrosoft</ax/li> 
clixa href =" htto : //www . amazon ■ com " ?Amazon</ax/li> 


22 

23 


k/ui> 

</div> 


</div> 


24 [ </body> 

25 [</html> 

26 


Now, when you save the same and 
refresh the page, it will produce you the 
below output, quite pleasing to eyes. 


Media Query:- 


Now, in this module what I am going to 
do is use all the above discussed 
concepts and many more things in the 
website which we have developed so 
far. We are also going to optimize the 
mobile experience in our existing site 
which means I open the same site on a 
desktop that will behave like a desktop 
one or when I open the same site on 
mobile that will behave like a mobile 
site. Now, here to fix my site I'll go in 


the layout page and apply this Meta tag 
as shown below. 


.Layoutcshtml -o X 


1 <!OOCTYPE ht*l> 

2 Bchtml lang="en"> 




4 <meta charset*"utf-8" /> 

5 <title>^ViewBag. Title - My ASP.NET MVC Application</title> 

6 <link href ="*'/f avicon . ico" rel="shortcut icon” type="image/x-icon" /> 
|<meta namee"vicwport" content* "width ■device -width, initial-scale« 1 . 8 j" /> ~| 

S clink href ="~/Content/bootstrap. min. css" rel=”stylesheet” /> 

9 <script 5rc®"*'/Scripts/jquery-2.1.0.min. js"x/script> 

10 cscript src="~/Scripts/bootstrap. js"x/script> 

11 <link href ="~/Content/BootStrap-theme-movie. css" rel=”stylesheet" /> 

12 g*gStyles . Render ( "~/Content/c5s" ) 

13 ^Script. Render ( "-/bundle s /modern izr" ) 

14 </head> 


cdiv class="container"> 

cdiv class-'navbar navbar-default"> 

<div class="navbar -header') 

Clixspan class=”navbar-t 


i">Select Onec/spanx/li> 


23 I </ul> 

24 f </div> 

<div class="navbar-collapse navbar") 

26 B <ul class=“nav navbar-nav") 

27 <li>gHtml. Act ionLink( "Home", " Index ", ”Hraae")</li> 

< li >§Html . ActionLink( "About" , " About ", " Home ")</li> 

29 cli)§Html.ActionLink("Contact", " Contact ", " Home ~)</li> 

<li>@Html .Act ion Link ( "Movies” , " Index ", " Movies " l</li> 
<li>SHtml,Partial(" LoginPartial ” )</!!> 

</ul> 


So, when I save the same and check in 
the responsinator page, then it will look 
like as shown below. 


Select One 


Home 

About 

Contact 

Movies 


iPhone 3+4 landscape ■ width: 48opx 


Little bit improvement I can see, but not 
100%. So, when I have to write single 
style sheet which will support both my 
general desktop and mobile devices, 
then we have to make certain 
adjustments. So, in order to achieve the 
same I'll use the feature “ media query”. 
Now, a media query is the expression 
which we can put into a CSS file to 




assign style rules based on the media 
query result. So, basically a media query 
is simply a query to see what media 
features are available. So, if the query 
returns true then style applies otherwise 
won't apply. But, here in my page I don't 
have any media which I don't want to 
render in case of mobile browsers. But, 

I have just put this concept here to 
explain one more technique to optimize 
the look. Below is the sample media 
query 



@media screen(min-width: 450px) 

{ 

#nav li:{ 
float: right: 

} 

} 

@ media screen(min-width: 850px) 

{ 

&nav { 

width: 200px: 

} 

#nav li: { 

float: left: 


} 


} 



Layouts and Pages:- 


One of the most common features of 
MVC 4 is ability to switch views 
depending on the string which the client 
sends to the server. Now, the way it 
works in MVC 4; if the browser is a 
mobile browser then runtime will render 
a view ending with “.mobile” extension. 
So, this view switching technique works 
with all types of views. So, as you can 
see in the below screen shot I have 
created one mobile version of layout 
pages and just added the mobile style 
sheet and mobile script. 


Search Solution Explorer (Ctrl+;) 

> References 
Service References 

> App_Data 

> App_Readme 

t> App_Start 

> bin 

t> Content 

> Controllers 

> m Filters 

> Images 

0 ■ Migrations 

> ■ Models 

> r;i obj 


> O Scripts 


■a Views 

> Account 

> Home 

> MovieReviews 

> Movies 

a Shared 

v[@] _Layout.cshtml 
r+C@] _Layout.Mobile.cshtml ~| 
s[@] _Layout_copy.cshtml 
B[@I _LoginPartial.cshtml 
B[@] Error.cshtml 
s[@] _ViewStart.cshtml 
ay!3 Web.config 
s 13 favicon. ico 



_Laycut.Mobile.cshtml -a 

1 < ! DOCTYPE ht»l> 

2 Bchtnl lang="en"> 

3 B<head> 

4 <meta charset»"utf-8" / 

5 <title>£\/iewBag. Title - 

6 <link h 


T MVC Application</title> 


|<link href="~/Content/BootStrap-theme-i»o 
<script spc»">v/Scpipts/jquepy .mobile-1.4 
ftgStyles . Render( "~/Content/css" ) *g 
^Scripts .Render ("~/bundles/iiiodernizr") 


3 EKdiv class=*’ 

3 0 <div elass«”row"> 

3 B <div class="navbar navbar-default"> 

<div class-'naubar- header "> 

2 <ul class="nav navbar-nav"> 

<lixspan class=”navbar-b 


.e.css" rel="stylesheet" 
. js"x/script> 


id">Select One</spanx/li> 


</ul> 

</div> 

<div class-'naubar- collapse navbar“> 

<ul class*"nav navbar-nav"> 

< li >@Html . Act ionLink("H 

<li >0Html . Act ionLink ( "About " , 
<li>@Html.ActionLink( "Contact", " Co 
<li>|IHtml. Act lonLink( "Movies", 

<li>§Html . PartialC LORinPartial ")</li> 


Now, the next thing which I need to do is 
adjust some basic settings like adding 
divs and data-roles to page as shown 
below. 


_Layout.Mobile.cshtml -u X 

1 < 1D0CTYPE ht«l> 

2 Bchtal lang-"en"> 


4 I <nieta charset="utf-8" /> 

5 ctitle>§ViewBag. Title - My ASP.NET MVC Application</title> 

6 <link href =”~/favicon . ico" rel="shortcut icon" type="image/x-icon“ /> 

7 cmeta na»e=" viewport" content*"width*device-width, initial-scaled. 0" /> 


9 clink hr ef -"~/Con tent/ j query. mobile -1.4. 2. css" rel="stylesheet” /> 

10 cscript src«"~/5cripts/ j query-2 . 1 . 0 . min . js"></ scripts 


12 clink href ="~/Content/BootStrap-thei»e-iiiovie . css” rel=” stylesheet" /> 

13 cscript src»”"'/Scripts/jquery.mobile*1.4.2. js">c/script> 

14 | g’gStyles . Render ( "~/Content/css" ) 

15 | ^Scripts. Render("~/bundles/modernizr") 

16 c/head> 

IS B lcdiv data -role- "page "> I 

19 B cdiv class=" container" > 

20 B cdiv class="row”> 


21 4 

22 E 

23 E 

cdiv class-"navbar navbar-default”> 
cdiv data-role=”header"> 

cul class="nav navbar-nav"> 

di>cspan class- "navbar-brand" >Select Onec/span>c/li> 



c/ul> 

cdiv class="navbar-collapse navbar"> 


30 E 

ill 

cul class-"nav navbar-nav”> 

cli>gHtml.Actionl_ink("Home", "Index”, "Home")</li> 
clisgHtml. ActionLinkfAbout", “About”, "Home")c/li> 
cli>§Html.Actionl_ink("Contact", "Contact", "Hoaie")c/li> 



M <html> 1 1 <div> || cdiv. containers || cdiv.row> 1 1 cdiv.navbar navbar-default> | cdiv.navbar-collapse navb...> 



Now, the closing tag of this div would 
be at the bottom of the page, just before 
closing HTML tag. Here one more thing 
I would like to tell you that, from here I 
am going to test my mobile features in 
Opera Mobile browser for desktop. So, 
this is basically an emulator where in 
you can set various mobile devices 


settings and test your site in it. So, I am 
testing in Samsung-Galaxy setting which 
you can see below. 



^ Opera Mobile - Sam...._ 


Home Page - My ASP.NET MVC Application 


localhost:1034/ 


Select One 




So, now my menus are vertical, let's do 
one thing stretch these menus 
horizontally so that we can have some 
more space visible on the screen. 


<di v class="navbar-collapse navb ar''> 

|<div data-role=”navbar ,, > ~~| 

<ul class="nav navbar-nav”> 

<li>@Html.ActionLink("Home", " Index ", " Home " )</li> 
@*<li>@Html.ActionLink( "About”, "About”, "Home")</li> 
<li>@Html.ActionLink( "Contact", "Contact", ”Home")</li>*@ 
<li>@Html.ActionLink("Movies", " Index ", " Movies " )</li> 
<li>@Html . Partial(" _LoginPartial ")</li> 

</ul> 

|</div> 

</div> 


Now, as you can see in the above screen 
shot, I have used “ data-role navbar ”, to 
align the menus horizontally So, this 
widget is already there with JQM to 
align the things horizontally Also, I have 
also commented unnecessary menus. 
Now, let's see in opera browser by just 


refreshing the same. 





Now, if you notice this, now, my register 
and login link not looking perfect. So, 
what I can do here is I can take the 
registration and login link out of this 
navbar and keep the same aligned 
vertically as shown below. 


<div class="navbar-collapse navbar"> 

<div data-role="navbar”> 

<ul class="nav navbar-nav"> 

<li>@Html.ActionLink("Home", " Index ", " Home ")</li> 
@*<li>flHtnil.ActionLink( "About", "About", "Home")</li> 
<li>@Html.ActionLink( "Contact”, "Contact", ,, Home")</li>*(0 
<li>@Html.ActionLink("Movies”, " Index ", " Movies " )</li> 

</ul>| 

</div> 

<ulxli class="nav navbar-nav" >§Html. Partial (" LoginPartial ")</lix/ul> 
</div> 


Then, it will appear quite good as shown 
below. 





Also, let me change the theme swatch of 
header to black. So for that I'll just 
change theme setting as shown below. 


<div data-role="page”> 

<div class=”container"> 

<div class="row"> 

<div class=“navbar navbar-de fault"> 

<div data-role="header" | data-theire="b"l > 

<ul class=”nav navbar-nav"> 

<lixspan class=”navbar-brand”>Select One</span></li> 

</ul> 

</div> 

<div class="navbar-collapse navbar”> 

<div data-role="navbar"> 

<ul class=”nav navbar-nav"> 

<li>@Html.ActionLink("Honie", " Index ”, " Home ")</li> 
@*<li>@Html.ActionLink("About", "About", "Home")</li> 
<li>(filHtml.ActionLink(”Contact , ', "Contact", "Home")</li>*@ 
<li>@Html.ActionLink("Movies", " Index ", " Movies " )</li> 

</ul> 

</div> 

<ulxli class="nav navbar-nav”>flHtnil.Partial(" LoginPartial ")</lix/ul> 
</div> 


Then, it will appear as shown below 








So, now it looks better, also header 
section and its text are nicely visible. 

So, if you see the content section that is 
not quite mobile optimized, it could have 
been bit better. So, let's fix this as well. 
So, what I do now, I'll include data-role 
content in my render body section as 
shown below. 


<div> 

<section class="main-content" data-role=”content"> 
@RenderBody() 

</section> 

</div> 


Now, when I refresh the page, it will 
appear in a nicer way. 







Now, here one more important thing to 
understand, let's suppose you are writing 
some script which you want to invoke 
every time on each page load, then in 
that case you can't use 
“ document.ready () ” event in here, this 

will work only 1 st time when your 
application loads. So, for this to work 
on every page there is a different bind 
event known as “ pageinit ”, which will 
execute the script on every page rather 
every link you click. Below, is the 
snapshot of pageinit event. 



<! DOC TYPE ht»l> 

3<html lang="en"> 

3Chead> 

<meta charset="utf-8” /> 

Ctitle>@ViewBag. Title - My ASP.NET MVC Application</title> 

<link href=”'«/favicon.ico” rel=”shortcut icon" type=”image/x-icon” /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> 

clink href="~/Content/jquery. mobile-1. 4. 2. css" rel="stylesheet“ /> 
cscript src="~/Scripts/ jquery-2 .1.0. min . js"X/script> 

clink href ="~/Content/BootStrap-theme-movie. css" rel=”stylesheet" /> 
cscript src=“~/Scripts/ jquery. mobile-1. 4. 2. js">c/script> 

§*@Styles . Render ( ”~/Content/ css” ) 
gSc ripts. Render ("~/bundles/modernizr") 



cscript> 



$(document) .bind("pageinit”, function() { 



alert("pageinit fired"); 



»J 



c/script> 



| c/head> 


Now, with that change in place, when 
you refresh the page, it will produce the 
alert as shown below. 






Collapsibles:- 


Now, in this section we'll see that how 
to work with collapsibles in our mobile 
browser. Currently, in our home page, 
we need to drag completely to see the 
contents below. But, we can optimize 
this behavior on the home page by using 
collapsible wizard. And for using the 
same, it means I need to change the 
partial view, so I'll include one new 
page which is basically mobile version 
of the partial view page as shown below 
in the screen shot. 


a Views 

> Account 

* Home 

[@] _ movies. cshtml 

[@] _movies.Mobile.cshtml 
[@] About.cshtml 
[@] Contact.cshtml 
[@] Index.cshtml 


[fcj] Resource.fr.resx 


> 01 Resource.resx 


Now, in the page I have just added the 
data role for collapsible as you can see 
below in the screen shot. 



.cshtml _Layout.Mobile.cshtml _Layout.cshtml 


@model iPagedList<MovieReview.Models.MovieViewModel> 


4 El<div id="movieDiv": 


<div class="gagedList” data-movie-target="#movieDiv"> 

@Html.PagedListPager (Model, page => Url. Action ("Index", 
PagedListRenderOptions. Minima lWithPageCountText) 

</div> 

fforeach (var item in Model) { 

| <div data-role="collapsible'’> 

<h4>Name - 0item .MovieName</h4xbr /> 

<h5>Director - @iten . DirectorName</h5 > 

<h5>Release Year - @item.ReleaseYear</h5> 

<h5>No Of Reviews - @item.No0fReviews</h5> 


<hr /> 


</div> 


<div class="gagedList” data -movie -target="#movieDiv''> 

@Html.PagedListPager(Hodel J page => Url . Action ( " Index " , 
PagedListRenderOptions. Minima lWithPageCountText) 

</div> 

</div> 


So, with the above change in place, 
when I go ahead and refresh my page 
mobile browser, it will produce the 
below result. 




c 


Opera Mobile - Sam... 


v«.mcn iij mm i v iimiiii. 


« Page 1 of 1. > 


Q Name - Godzilla 
Q Name - Avatar 
Q Name -Titanic 
Q Name - Die Another Day 
Q Name - DDLJ 


« Page 1 of 1. » 



Samsunt 480x800 PPI: 240 


Qv 


50% 






Now, when you click on any of these 
collapsible links, it will open like 
below having the complete movie 
details. 






Now, you can improvise this bit more by 
trimming the space between the 
collapsibles. So, for this I have used 
widget collapsible -set as shown below 
in the screen shot. 


_movies.Mobile.cshtml 


@model PagedLii-t<MovieReview. Models. ":vieViewModel> 


4 EKdiv id=''movieDiv": 


<div class=”gagedList" data-movie-target=”#movieDiv"> 

@Html.PagedListPager(Model, page => Url. Action (" Index ", new { page }), 
PagedListRenderOpticns .MinimalWithPageCountText) 

</div> 

| <div data-role=''collapsible-set"> | 
gforeach (var item in Model) 

{ 

<div data-role=”collapsible”> 

<h4>Name - @item.MovieName</h4xbr /> 

<H5>Director - @item.DirectorName</h5> 

<h5>Release Year - @item. ReleaseYear</h5> 

<h5>No Of Reviews - @item.NoOfReviews</h5> 

<hr /> 

</div> 

> 

</div> 

<div class=”gagedList" data-movie-target=''#movieDiv''> 

@Html.PagedListPager(Model, page => Url. Act ion ( " Index ", new { page }), 
PagedListRenderOptions. MinimalWithPageCountText) 

</div> 

</div> 


Now, with the above change in place, it 


will trim the space in between 
collapsibles and produce it like a set 
shown below. 






Now, one more important thing to note 
here that by default ajax features are on 
for all navigations links you click, so 
because of this sometimes by mobile 
browser doesn't behave or doesn't load 
the complete page, it just renders what is 
being loaded earlier. So, to fix this 
behavior we need to tell the mobile 
browser, please switch off the Ajax 
enabled feature. And we need to pass 
this instruction before Mobile j Query 
script gets loaded as shown below. 



| .Layout.Mobile.c 


1 < ! DOCTYPE html> 

2 ElchtmJ lang-"en"> 

3 B<head> 

4 | <meta charset="utf-8” /> 

5 Ctitle>§ViewBag. Title - My ASP.NET MVC Application</title> 

6 <link href ="~/f avicon . ico" rel="shortcut icon" type="image/x-icon" /> 

? <meta name -"viewport" content=”width-device -width, initial- scale- 1 . 0 " /> 

8 

9 clink href="~/Content/jquery. mobile-1. 4. 2. css" rel="stylesheet" /> 

10 cscript src="~/Scripts/jquery-2.1.0.min. js”>c/script> 

!1 


12 



clink href -"-/Content/BootSt rap -theme -movie. css" rel="s 

:: 


cscript> 

14 

B 

S(document) .bind("mobileinit", functionQ { 

IS 



$. mobile. a jaxEnabled - false; 

16 



»i 

17 



c/ script) 

18 



cscript src= ~/Scripts/jquery. mobile-1. 4. 2. js >c/script 

19 


g*(8Sty les . Render ("~/Content/css” ) *§l 


20 1 §Scripts.Render("“-/bundles/raodernizr") 

23 1 </head> 

24 r 


Now, when you test your app in mobile, 
it will behave same way as it is 
behaving in desktop browser. 


Grids and Buttons:- 

Now, one more change which you can do 
here is aligning the content in grid 
format. Now, for using grid format, we 


have class with different specifications 
say “a,b,c,(T ’ which represents “ 2,3,4 or 
5” columns. So, below in the code I 
have just used three columns set and 
surrounded the same with individual 
divs. 


_movies.cshtml -o X | 
fmodel IPaged_ist<MovieReview. Models . 


4 0<div id="movieDiv"> 

5 

6 El <div class="EagedList" data-movie-target="#movieDiv"> 

§Html.PagedListPager (Model, page => Url. Action (" Index ", new { page }), 
PagedlistRenderOptions.MinimalWithPageCountText) 

9 [ </div> 

§foreach (var item in Model) 

t , , 


<h4>Name 

. </div> 

| <div class="u 


@item . MovieName< /h4xbr /> 


-block-b"> 


<div> <h5>Director - §item.DirectorName</h5x/div> 
<div> 

<h5>Release Year - §item. ReleaseYear</h5 > 

</div> 

<div> 

<h5>No Of Reviews - gitem.MoOfReviews</h5> 
</div> 

</div> 

<hr /> 

</div> 

> 

<div class="gagedList" data -movie -target ="#movieDiv" > 

@Html.PagedListPager (Model, page => Url . Action ( " Index " , new 
PagedlistRenderOptions.MinimalWithPageCountText) 

</div> 

</div> 


Now, “ ui-grid ” here is initializing the 
grid and blocks are representing which 
item should be taken as 1 st or 2 nd or 
subsequent. 

Now, the next thing which we can 
improvise is button look and feel to 
make it more mobile friendly. So, now 
for doing this I need to include one more 
mobile version of index page so that I 
can change the setting there. 



a £ Home 

[@] _movies.cshtml 
[@] _movies.Mobile.cshtml 
C@] About.cshtml 
[@] Contact.cshtml 
C@] Index.cshtml 
[@] Index.Mobile.cshtml 
[3) Resource.fr.resx 
> \3 Resource. resx 

Now, in here I have assigned button, 
with role button and theme b, just to give 
it a bit contrast. 



So, now when I save the same and 
refresh my mobile browser, it will take 
the effect. 









Now, buttons can also have icons, so I 
can use search icon as shown below. 



With this it will produce the below 
output. 







Forms:- 


Now, in this section, we'll look more 
about Forms or Friendly Forms, which 
not only looks better, but better 
responsive and touch sensitive. So, here 
I am going to use “ data - 
role=”feildcontain ”” . Now, 

“ fieldcontain ” is the one which aligns 
the markup and present the text in nicer 
way So, we'll start doing the forms 
implementation from the Edit page. 



Now, I have also setup the theme for the 
button. So, when you refresh the page, 
you will get to see nice rounded corner 
areas with themed button. 







So, obviously there are many settings 
which you can think off and apply the 
same in your application as per your 
requirement. You can check many more 
widgets on the JQuery Mobile Site with 
example. 

Summary:- 

So, in this section we have seen many 
things; like we started with the basics of 
JQM. Then we took our Movie Review 
site and converted the same to support 
Mobile browsers as well. For doing 
this, we have come across many widgets 
and settings. With these many settings, 
we have made our app mobile friendly. 


Obviously, whatever things which we 
have seen in this section, JQM is not 
only limited to this. There are many 
more things which you can experiment 
with when you look at the JQM site. 



Chapter 14: 
ASP.NET MVC 5 


WHAT DO you find in 
this CHAPTER? 


=> Introduction 
=> Scaffolding 


=> ASP.Net Identity 
=> One ASP.Net 
=> Bootstrap 
=> Attribute Routing 
=> Filter Overrides 
=> Summary 


Introduction:- 

Hi Friends, now we have come to a 
section where in we can discuss MVC 5 
Features. In this section, I'll be doing 
basic walkthrough with the above listed 
topics. So, basically these topics are the 


extension of what we built so far. The 
ASP.NET MVC 5 Framework is the 
latest update to Microsoft's popular 
ASP.NET web platform. It provides an 
Extensible, High-Quality programming 
model which allows you to build 
Dynamic, Data-driven websites, 
focusing on a cleaner architecture and 
Test-driven development. 

ASP.NET MVC 5 contains a number of 
improvements over previous versions, 
including some new features, improved 
user experiences; native support for 
JavaScript libraries to build multi- 
platform CSS and HTML 5 enabled sites 
and better tooling support. 



Scaffolding:- 


So, Visual Studio 2013 includes a new 
Scaffolding Framework for ASP.NET 
MVC 5., Scaffolding is basically a code 
generation framework provided for 
ASP.NET Web Applications. Using this 
framework, we can easily generate code 
that interacts with our data models. Let's 
get started with demo in this section. 
Let's open VS 2013 and create one new 
project. Here, I have already created 
with the name MVC5 as shown below in 
the screen shot. 


Now, let me go ahead and create one 
new class in the Models folder with the 
name Movies as shown below. 



Now, in the project right-click and say 


add “New Scaffolded Item ” as shown 
below. 



View 

► 

Analyze 

► 

Publish... 


Scope to This 

New Solution Explorer View 
Show on Code Map 

Add 

► 

Manage NuGet Packages... 


Set as Startup Project 

Source Control ► 

Cut 

Ctrl+X 

Paste 

Ctrl+V 

Remove 

Del 

Rename 


Unload Project 

Find Code Issues 
Find Symbols External to Scope 
Find Code Dependent on Module 
Optimize References... 

Project Hierarchy 
Refactor 

Ctrl+Alt-t-Y 

Cleanup Code... 

View Project Dependencies 

Ctrl+E, Ctrl+C 

Open Folder in File Explorer 


Then, a new window will get open 
which will have two options, one for 
MVC and another for Web API. 



Remember, Web API 2 is also released 
with this version. But, we need to select 
MVC from there. 



Then, click on Add button. Once, you 
click on Add button, below window will 
open 



Now, here we need to create new 
context class as we don't have one. So, 
click on “New data context This will 
open below window 




After entering the above values, just 
click on add, then it will go to the parent 
window with these context setting as 
shown below. 




Now, click on Add, this will generate 
the required components as shown 
below. 




Now, when I build and refresh the page, 
it will produce the below page. So, 
below page is the default page of the 
MVC 5 application. 



ASP.NET 

ASP.NET is a free web framework for building great Web sites and Web applications using HTML. CSS and 
JavaScript. 



Getting started 


Get more libraries 


Web Hosting 



Now, when I navigate to the url 
“ http://localhost : 53 1 7/m ovies it will 
produce me the below output as shown 
below. 


Application r 


Index 



Now, remember that we haven't seeded 
any Test Data as we did while building 
the application. But, that's ok we can go 
ahead and create few records in it as 
shown below. 



Application nt 


Create 

Movies 



Index 


My ASP NET Application 


So, as you can see that my scaffolding 
has taken care of not only my new 
context, rather my all CRUD operation 
which you can verify as shown below. 
So, below is the Edit page. 



«- : C D local ho 


Edit 

Movies 


Similarly, we have details and delete 
page. 


Details 

Movies 


O 201 4 - My ASP.NET Application 


«- C | D localhost 5 S 17 /movies/Delele/l ^ = 



Delete 

Are you sure you want to delete this? 
Movies 





Now, if you go ahead and see the context 
file, then you can see below setting 


MoviesContext.es - 

MVC5.Models.MoviesContext 


using System. D 

I using System. W 


public class MoviesContext : DbContext 

{ 

It You can add custom code to this file. Changes will not be overwritten. 

// If you want Entity Framework to drop and regenerate your database 
// automatically whenever you change your model schema, please use data migrations. 
tt For more information refer to the documentation: 

// http : // msdn ■ microsoft ■ com/en -us/data/ii591621 ■ aspx 

public MoviesContext() : base("name=MoviesContext") 


public System. Data. Entity. DbSet<MVC5.<':odels.Movies> Movies { get; set; } 


Now, same entry is also added in the 
web.config file. 




:e-(LocalPb)\vll.ejAttachDbF£lenaiKe-|DataE>irectory|\aspnet.MV 






Now, let’s go ahead and check its new 


Identity Feature. 


ASP.Net Identity:- 

So, while we were building our 
application, we have used membership 
provider for our application. Now, one 
point to note here, membership provider 
has come a long way since its inception. 
There have been many changes done to 
this in order to support today's web 
demand means these days web has 
become more social friendly and 
everywhere, you find this integration. 

So, considering these demands, web 
applications also need to provide 
similar experience so that users can 


login with their social media 
credentials. Now, to get this done 
Modern Membership Provider is 
extended to support these new features. 
Some of the salient points for the same 
are listed below. 

• One ASP.Net Identity System: - 

It can be used across all the 
ASP.NET Frameworks like 
WebForms, MVC, Web Pages, 
Web API, and SignalR etc. 

• Ease of plugging-in profile data: 

- The user's profile schema 
information can be integrated 
with the web application. 

• Persistence Control: - ASP.NET 

Identity system stores all user 
information in the database. 



Social Login Provider: - Social 
Log-In providers such as 
Facebook, Twitter, Google, 
Microsoft Account and others 
can be easily added to the web 
application. 

Windows Azure Active 
Directory (WAAD): Now, the 
best thing is that the Login-in 
information from WAAD can 
also be used for authenticating a 
web application. 

OWIN Integration: ASP.NET 
Identity is frilly compliant with 
OWIN Framework. OWIN 
Authentication can be used for 
login. OWIN stands for “Open 
Web Interface for .NET”. Now, 



to do deep dive in OWIN 
framework, you can refer the 
following article 

http://owin. org/ 

If you are using Visual Studio 2013, all 
these features are available in ASP.Net 
identity membership system by default; 
otherwise you can download the same 
from nuget package manager by 
searching with 

“Microsoft.Aspnet. Identity. Core ” and 
“Microsoft.Aspnet. Identity. Entity From 


One ASP.Net:- 


Now, One ASP.NET is a new integrated 


project system for .NET Developers. 
This system makes it easier to work with 
multiple frameworks like Web Forms, 
MVC, Web API etc., in a single project. 
So basically using the One ASP.NET 
project system, you can use ASP.NET 
Web Forms and MVC together, and can 
easily add ASP.NET Web API and 
SignalR as well; in the same Web 
application. Now, let's go back to Visual 
Studio and start one small demo on the 
same. Let, me go ahead and create one 
new project with the name “ OneASP ” as 
shown below in the screen shot. 





Upon clicking on Change Authentication, 
it will produce several options as shown 
below in the screen shot 




Now here you can see that there are four 
options provided to you. 

No Authentication:- The application 
won't have any authentication. 

Individual User Accounts: - Here, our 
Sql database will be used to store user's 
information. Now, one point to note here 
that, this option can be extended to 
support social profiles like Facebook, 



Twitter etc. 


Organizational Accounts: - Here, users 
can be authenticated either by using the 
user profiles stored in Active Directory, 
Windows Azure Active Directory, or 
Office 365. It also provides Single Sign- 
on access level to the application. The 
Organizational Accounts require the 
following details: 




Now, when you click on both the 
dropdowns, it will present you with the 
following options 

• Cloud Single Organization 

• Cloud-Multi Organization: - 
Now, this option is applicable 
when you want to store the 
credentials information on the 
Windows Azure Activity 
Directory (WAAD. 

• On-Premises - Used for the 
Active Directory on-premises. 

• Domain - The WAAD domain for 

setting application in it. 

• Access Level - The application 

needs to query or update 
directory information. 



• Application ID URI - Basically, 

created by appending the 
project name to the domain. 

• Now, after Organization Account 

structure the last option comes 
as 

• Windows Account: - The basic 

one. Obviously, we have 
discussed the same while 
building the app in previous 
chapters. However, just for 
refreshing your theory, 
Windows Accounts are used for 
building Intranet Applications. 

Also, apart from Organizational 
Accounts, there is Windows 
Authentication as well which supports 



Intranet Applications. We have already 
discussed in detail about Windows 
Authentication. 

Now, let's close this project, now go 
back to the project which we have 
created with the name “M VC5”. Now, 
here this application is configured to use 
individual user accounts. So, let me go 
ahead and configure the application to 
use my social credentials as well for 
login. Now, here I'll be enabling it for 
google like I did earlier. But, here the 
process to do the same is bit different. 
So, here when you see the startup class, 
there is a call to “ configure auth ” as 
shown below in the screenshot. 



^3 MVC5.Startup » 1 0 Configuration(IAppBuildcr app) ~ 

^ Busing Microsoft. Owin; [j 

using a«in; | 

[assembly: OwinStartupAttribute(typeof (MVC5. Startup))] 

Bnamespace MVC5 

{ 

- public partial class Startup 

I { 

public void Configuration(IAppBuilder app) 

{ 

Conf igu reAuth (app); 

> 

> 

[> 

Now, here when you do F 12 on 
“ ConfigureAuth ” method, then it will 
take you to the class 



Now, here I'll go ahead and uncomment 
the google API call as shown below and 


then build the project. 


// For more information on configuring authentication, please visit http : //eo.microsoft ■ com/fwlink/ ?LinkId-301 
public void ConfigureAuth(IAppBuilder app) 

{ 

// Enable the application to use a cookie to store information for the signed in user 
app . UseCookieAuthentication( new CookieAuthenticat ionOpt ions 
{ 

AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie, 

LoginPath = new PathString("/Account/Login") 

»; 

// Use a cookie to temporarily store information about a user logging in with a third party login provider 
app . UseExternalSignlnCookie ( Def aultAuthenticationTypes .ExternalCookie); 

// Uncomment the following lines to enable logging in with third party login providers 
//app . UseMicrosoftAccountAuthentication ( 

// clientld: ”, 

// clientSecret: 

//app . UseTwitterAuthentication ( 

// consumerKey: ", 

//app.UseFacebookAuthentication( 

// appSecret: **)j 


app . UseGoogleAuthentication ( ) ; 

> 



So, now when you run the app, you will 
see that google is also available to login 
into the application. 


■ another service to log In. 


Log in. 

Use a local account to log In. Use 


| Google | 


© 2014 - My ASP.NET Appncaton 


So, when you click on this link and 
provide your credentials, it will ask 
your permission for the 1 st time as 
shown below and then jump back to 
application with your user id there 


Google 


Localhost • 





Application re 


Register. 

Associate your Google account. 
Association Form 


User name RahulSahay 




Now, when I click on Register, then I 
will land back to my application with 
my user Id as shown below. 


ASP.NET 

ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and 
JavaScript. 



Similarly, you can enable other account 
settings, but for that you need to register 
your app with those social sites, so that 




they can issue you one App id and it's 
key Google is open as it doesn't require 
any sort of keys to enable open 
authentication. 


Bootstrap:- 

Now, in this case, MVC 5 application by 
default comes with bootstrap templates 
like shown below in the screen shot. I 
already explained this while designing 
my app in earlier chapters that bootstrap 
is a free collection of HTML and CSS 
based design templates. Also, bootstrap 
can be downloaded from 


http://getbootstrap.com/ . 


Solution Explorer - ? X 


dt t © ' m s' ii <> *> -- a 


Search Solution Explorer (Ctrl-*-;) fi w 1 

SI Solu 

A HI 

> > 

> 

i 

> i 

tion 'MVC5' (1 project) 

1VC5 

* Properties 
■ References 
App_Data 
App_Start 
Content 


El bootstrap. css 
El bootstrap. min.css 


El Site.css 

> Controllers 

> fonts 

> Models 

> M Scripts 

> m Views 

El favicon. ico 


> (^] Global.asax 


y3 packages.config 


<D Project_Readme.html 

> c* Startup.es 

> Web.config 



Now, if you open the layout page of the 
application, you will see these scripts 
have already included. Obviously; you 
can go ahead and use many other 
bootstrap widgets to give life to your 
application. 



Now, as you can see in the above screen 
shot that bootstrap has been included 
with the bundle query. Now, to examine 


the same you can see the 

“Bun die Con fig. cs ” 



So, now one more point to note here is 
that MVC 5 by default supports mobile 
feature as shown below. 


^ Opera Mobile - Sam...L 


Home Page - My ASP.NET Application 


| localhost:5317/ Gnoglo 


Application name 


ASP.NET 

ASP.NET is a free web 
framework for building great 
Web sites and Web applications 
using HTML, CSS and JavaScript. 


Learn more » 


Getting started 





You might have noticed that all menus 
have been stacked at the top right corner 
of the screen. Now, when you click on 
this link, it will list all the menu items as 
a drop down. 






When you click on the “ Movies ” link 
here then it will produce the page which 
we have made with the new scaffolding 
template as shown below. 



Opera Mobile - Sam. 







Now, obviously there is always a room 
for perfection by overriding the current 
behavior. So, I leave this UX part on 
readers; how they want UI to look like. 


Attribute Routing:- 

In MVC 5, we have gained more control 
over URI routing. We can implement the 
route definition along with the action 
methods in the controller class, using 
“attributes”. In other words, we use 
attributes to define routes. To enable 
attribute based routing, the 
“RegisterRoutes” method needs to be 
changed: 



routes . MapMvcAttr ibuteRoutes ( ) ; 


Now, after this setting is done, I need to 
write one method, let's say in the movies 
controller itself to filter the results. 
Since, I have added few movies here, so 
can filter the same based on movie 
name. So, for that I'll write below 
method 


[Route( "Movies/{MovieName}" ) ] 

public ActionResult SearchMovie(string MovieName) 

{ 

var model = db. Movies. Where (m => m. MovieName. StartsWith(MovieName)); 
return View(model); 

> 


Application i 


Then, I'll navigate the 
http://localhost: 53 1 7/M ovies/Godzilla . 
then it will filter the results based on this 
parameter and produce the below output. 


«- c 


localhostrj 1 ; 


Application n 



SearchMovie 


Now, here we can also define default 
value in the Route Parameters. Now, this 
is really simple, you just need to supply 




the parameter value in the method as 
shown below. 


[Route("Movies/SearchMovie/{MovieName=Godzilla}") ] 

public ActionResult SearchMovie( string MovieName) 

{ 

var model = db. Movies .Where (m => m. MovieName. StartsWith (MovieName)); 
return View( model); 

> 

So, now when I navigate the 
“ http ://localhost: 53 17 /Movies ” url, 
then it will display the complete list 




But, when I navigate 

“ http://localhost: 53 1 7/Movies/SearchA 




then it will produce me the below output 


f- CD localhost5317/Movi«/SearchMovie/av fa ; 



SearchMovie 


And if simply navigate 
“ http://localhost: 5317 /Movies/Sear chA 
then it will produce me the default value 
as shown below 



SearchMovie 


RahulSahay! L 


* 


So, with route attributes in place, it 
gives much flexibility to developers, to 
design the application more route or URI 






oriented. 


Filter Overrides:- 

Now, filter overrides are just an 
extension to filters. In order to 
understand this concept better, let's 
suppose you want to authenticate users 
for some actions inside the controller or 
consider the entire controller actions you 
want to authenticate. Now, in this case 
you will apply “[Authorize]” attribute 
in front of the controller as shown 
below. 


3 namespace MVC5 . Controllers 

| { ^ h ■ ] 


3 public class MoviesController : Controller 

| { 

private MoviesContext db - new MoviesContext(); 
// 6ET : /Movies/ 


public ActionResult Index() 

{ 

return View(db. Movies. ToList()); 

> 

[Route(”Movies/SearchMovie/{MovieName=Godzilla}”)] 
public ActionResult SearchMovie( string MovieName) 

var model = db. Movies. Where(m => m. MovieName. StartsWith (MovieName)); 
return View (model); 

> 


I- 


Now, when you build the app and try to 
navigate the Movies link, then it will 
take you to the login page as shown 
below. 



Log in. 











Now, consider there is a situation, 
where in you want to bar all actions but, 
you want to show Index Action to the 
anonymous user. Then in that case you 
need to implement Filter Override 
mechanism to achieve the same. So, for 
doing the same you need to implement 
one class file with the name 
‘ ‘ FilterOverride ’ ’ 



Now, the class 

“ Filter OverriddeAttribute ” is inherited 


from the “Filter Attribute” class and 
implements “IOverrideFilter”. Now, 
this interface is used to define the filters 
applied on the controller. The property 
“Filters ToOverride ” returns the 
“ IAuthorizationFilter ” type. 

Now, in front of that action method 
which you want to override just place 
the same, it will override the action. 

// GET: /Movies/ 

[Filter-Override] 

public ActionResult IndexQ 

{ 

return View (db. Movies .ToListQ); 

> 


Now, when I build and refresh the page, 


it will show me index page upon 
clicking on movies link, but other 
actions will need user authentication. 






At the same time, when I click on 
“ Create New ” link, it will ask me to 

authenticate 1 st as shown below. 



Log in. 


' another service to log in. 




Summary:- 

So, as you have seen that MVC 5 is the 
extension of MVC 4. All these features 
we have already implemented while 
building our app. However, in MVC 5, 
things have become simpler and easier. 
It offers new thing like One ASP.NET, 
then improved scaffolding for MVC and 
Web API both. It also offers default 
support for bootstrap templates, which 



we have implemented in our app by 
downloading additionally. Then, it also 
offers extension to filter attributes, 
which is very helpful in those cases 
where you want skip any action in the 
same controller. 



Chapter 15: 
ASP.NET MVC 6 


WHAT DO you find in 
this CHAPTER? 


=> Introduction 


=> Features 


Prerequisites 

Setting up VM 

Getting Started with 
Visual Studio 14 

Creating your 1st Visual 
Studio 14 MVC Project 

Configurations in MVC 
Project 

Project. JSON 

Startup class 

Adding a Class Library 
Project 


Deployment to Azure 



=> Bin 


=> Self Hosting 
=> Summary 


Introduction 

Hi Friends, so we have come to the end 
of this book wherein we'll discuss more 
about this new upcoming version of 
MVC. MVC 6 in many terms has given a 
big boost to the existing MVC. Let's 
discuss the same in detail. Now, in a 
nutshell “MFC 6 = MVC + Web API + 
Web Pages”. So, MVC 6 has merged 
these three different frameworks, hence 
MVC 6 is a next version of MVC off 


course, but it's also a next version of 
Web API 3 and Web Pages 4. So, 
basically speaking there will be a 
common framework which will let you 
do Model Binding, Routing, Validation, 
Dependency Injection and many more 
things. So, let's get started and discuss 
the same in detail. 


Features:- 

So what are you going to get with MVC 
6 ? 

• One Set of concepts - So, there 
will be a Framework which 
will do both Web UI and Web 
APIs. So, it will have 


controllers which will return 
views and it can also return 
Web APIs. So, same controller 
can return formatted data JSON, 
xml etc. 

Smooth Transition from Web 
Pages to MVC - Let's consider 
a scenario that you have started 
building very simple web 
application with bunch of 
“cshtmls” files. Now, you can 
go ahead and put the code inline 
and scale it out. So, it will have 
all the MVC features like 
Areas, controllers and Unit 
Testing other relevant stuffs. 

Built DI First: - So, one of the 
main focuses of MVC 6 is DI 



(Dependency Injection) First. 
Today in MVC we have 
dependency resolver and there 
is set of implementation for that 
to work with your favorite IOC 
(Inversion of Control). Then 
Web API has its dependency 
resolving mechanism. So, in 
MVC 6, there is centralized 
repository for DI which can be 
used by everybody. So, going 
forward it's not like that 
different DI Implementation 
mechanism for different IOCs. 
It will be Kind of DI Abstract 
frameworks which will give 
codebase to get system 
bootstrapped. 



Based on new Request Pipeline 
in ASP.Net vNext: - MVC 6 is 
built on new request pipeline 
which comes with “ASP.Net 
vNext”. It runs with a new 
Middleware pipeline which 
comes with ASP.Net vNext. 

Run on IIS or Self Host: -. Since 
MVC 6 run on a new pipeline, 
so it can be self-hosted as well; 
means it can be hosted outside 
of IIS. So, you don't need to 
have IIS in your box to host the 
application. Self Hosting also 
means it will have mini “CLR” 
version which is “KLR” in your 
hosting folder, which will 
actually create a runtime 



environment for the application 
to run in any environment say 
MAC, or in Linux box etc. 

Runs Cloud Optimized: - Cloud 
optimized new version of .NET 
which is slimmed down and 
highly optimized. Consider your 
system which is running on 2.0 
framework and you want to 
work on a new project which is 
latest and greatest but somehow 
you don't have option to 
download those frameworks 
and build that. So, with this 
option what you can do, you can 
download this particular 
framework in your project via 
nuget itself; which is going to 



be mini version of CLR itself 
which you are needing not 
going to affect your machine 
settings at all. So, with this 
option you can actually run 
different projects targeting 
different frameworks side by 
side. 

Now, apart from these features there are 
other major changes also done to MVC 6 
.They are:- 

• MVC 6 has no dependency on 

“ System. Web ”. Hence, it's a 
leaner framework, with faster 
startup time and lower memory 
consumption. 

• vNext apps uses a cloud- optimized 



.NET framework. This means 
framework is about 11 
megabytes in size compared to 
200 megabytes for the full 
framework, and is composed of 
a collection of NuGet packages. 

The reduced size of the cloud- 
optimized framework makes it 
practical to deploy very 
smoothly. 

You can run apps side-by-side 
with different versions of the 
framework on the same 
machine. 

Your apps are fairly insulated from 
framework changes on the 
machine. 

You can make framework updates 



for each app on its own. 

• No errors when you deploy to 

production resulting from a 
mismatch between the 
frameworks. 

• Providing the cloud- optimized 
framework in a collection of 
NuGet packages achieves the 
following goals: 

1 You can include with an 
application only the parts of the 
framework you actually need. 
No unnecessary memory, disk 
space, loading time, etc. 

2 vNext uses the “ Roslvn ” to 
compile code dynamically. We 
can edit a code file, refresh the 
browser, and see the changes 


without rebuilding the project. 

3 vNext is open source and cross 

platform which means it can run 
on MAC machines or Linux 
based machines as well. 

4 The entire source code is already 

released as open source via 
the ” . NET Foundation You 

can also refer the source at 
“ https://github.com/aspnet ” 
and follow progress on vNext 
in real time. You can also send 
pull requests and contribute to 
the source code. 

5 vNext is developed keeping cross 

platform in mind including an 
active collaboration with 

Xamarin to ensure that cloud- 


optimized .NET applications 
can run on Mac or Linux on top 
of the Mono runtime. 

However, I have also inserted one table 
below showing complete difference 
between normal vNext version and its 
cloud optimized version. 


1 Feature 

.Net vNext 

.Net VNext (Cloud Optimized) 

Cloud Ready 



Modular Design 

V 

V 

Dependency Injection 

V 

V 

Side by Side 


V 

Open Source 

V 

V 

Fast Start up 


V 

Low Memory' 


v 

High Troughput 


V 

Fast Development 

V 

V 

Consistent Tracing/Debugging 

V 

V 


Prerequisites:- 



It is recommended to install the Visual 
Studio "14" CTP on a VM (Virtual 
Machine) or fresh computer which can 
be formatted later on. There are known 
side-by-side compatibility issues with 
Visual Studio 2013. Now, to deploy the 
same in VM, you need to have Azure 
Subscription for that. Even if you don't 
have Azure subscription, you can enjoy 
these features for 1 month as a trial 
period. So, without wasting time, let's 
get started. 


Setting up VM:- 

Since, I have an Azure subscription, so 
let me go ahead and create one Custom 


VM for myself. Login into 
http://az.ure. Microsoft, com/en-us/ . 
once you are logged in successfully, you 
will land on a dashboard page as shown 
below in the screen shot. 




So, here as you can see in the left menu 
bar, I have already created one VM with 
Visual Studio 14. But, let me go ahead 
and show you the steps at least how to 
create the same. This is very simple, you 




need to click on Virtual Machines link in 
the menu and then click on “New” button 
at the bottom of the page as shown 
below. 



Now, as soon as you create on New 
button, it will open a new page with 
different options as shown below 




Then, I'll select create a VM “ From 
Gallery Then, this will again list me 
further options as shown below 


CREATE A VIRTUAL MACHINE 


Choose an Image 


MICROSOFT 
WINDOWS SERVER 
SHAREPOINT 
SQLSERVER 
BIZTALK SERVER 
| VISUAL STUDIO | 
UBUNTU 
CENTOS 
SUSE 
ORACLE 
PUPPET LABS 

MY IMAGES 
MY DISKS 

MSDN O 

J HIDE PRE-RELEASE 


FEATURED 


0 > 


Windows Server 2012 R2 Datacenter 


Windows Server 2012 Data 


Windows Server 2008 R2 SP1 


Windows Server 
2012 R2 Datacenter 


At the heart of the Microsoft Cloud OS vision, 
Windows Server 2012 R2 brings Microsoft's 
experience delivering global-scale cloud services 
into your infrastructure. It offers enterprise-class 
performance, flexibility for your applications and 
excellent economics for your datacenter and 
hybrid cloud environment This image includes 
Windows Server 2012 R2 Update. 

OS FAMILY Windows 

PUBLISHER Microsoft Windows Server Group 

NUMBER OF 1 


SQL Server 2014 RTM Enterprise 


Now, it has listed me many options with 
which I can go ahead and create my 
Virtual Machine. However, in here I'll 
be selecting Visual Studio from the left 
pane as highlighted. Upon clicking on 
this, it will give me Visual Studio 14 
option as shown ahead in the screen 
shot. 



CREATE A VIRTUAL MACHINE 

Choose an Image 


ALL 

MICROSOFT 
WINDOWS SERVER 
SHAREPOINT 




Visual Studio 
Professional 14 CTP 
2 

Windows Server 2012 R2 


SQLSERVER 
BIZTALK SERVER 
VISUAL STUDIO 
UBUNTU 
CENTOS 

ORACLE 
PUPPET LABS 


The Visual Studio Professional "14" CTP image 
enables you to quickly create a development 
environment to explore the new Visual Studio 
"14" capabilities. The image also includes 
Microsoft Azure SDK 2.3 for Azure development 
scenarios. By using the image you agree to 
Microsoft Supplemental Software License Terms 
for Microsoft Visual Studio "14" Product Family 
Preview which can be found on the image 
desktop. 


MY IMAGES 
MY DISKS 


MSDN Q 
I HIDE PRE-RELEASE 


NUMBER OF 




soft Visual Studio Group 


PRICING INFORMATION 

Pricing varies based on the subscription you select to 
provision your virtual machine. 


Now, when I click on next, then it will 
ask me usual details like username and 
password and some other details like 
VM configuration related stuffs as 
shown below in the screen shot. 


CREATE A VIRTUAL MACHINE 

Virtual machine configuration 


i 


SIZE 

I A2 (2 cores, 3.5 GB memory) 


J 


NEW PASSWORD CONFIRM 



* 


Visual Studio 
Professional 14 CTP 2 
Windows Server 2012 
R2 


The Visual Studio Professional "14" CTP 
image enables you to quickly create a 
development environment to explore 
the new Visual Studio "14" capabilities. 
The image also includes Microsoft Azure 
SDK 2.3 for Azure development 
scenarios. By using the image you agree 
to Microsoft Supplemental Software 
License Terms for Microsoft Visual 
Studio "14" Product Family Preview 
which can be found on the image 
desktop. 


OS 

Windows Server 2012 R2 
PUBLISHER 


Now, since I have already created my 
VM, so I'll close this here itself and 
login to my VM. In order to connect to 
the VM, you need to go to dashboard 
page, select the VM and then from the 
bottom of the page say connect as shown 
below in the screen shot. 



Now, as soon as you click on this icon, it 
will download a utility to connect you to 
your remote machine. So, here this utility 
will ask for your username and 
password which you have provided by 
creating the VM. Upon Successful 
authentication, it will launch the Virtual 
Machine as shown below in the screen 
shot. 





Now, here when you click on the 
desktop icon, it will show Visual Studio 
Icon on the desktop itself as shown 
below in the screen shot. 



Getting Started with Visual 
Studio 14:- 

So, now when you click on this icon it 
will launch the new version of the Visual 
Studio with ASP.Net vNext as shown 
below in the screen shot. 


> Professional 14 CTP 

Discover what's new in Professional 14 CTP 

Start 

Open Project.. 

You can find information about new features and enhancements in Professional 14 CTP 
by reviewing the following sections. 

Learn about newfeatures in Professional 14 CTP 
Explore what’s new in Team Foundation Service 

Open from Source Control... 

Connect to Azure 


Connect (5) 

Relocate the What's New information 

What's new on Microsoft Platforms 
93 Windows 
93 Windows Azure 

93 Windows Phone 
Cl Microsoft Office 


Now, when you click on the New 
Project, it will launch template selector 
screen and from that under that C# 
category, when you select web as shown 
in the below screen shot, it will list 
vNext templates as shown below. 



[ .NET F 

amework 4.5 * Sort by: | Default 

-1 !l ! 

| Search Installed Templates (Ctrl +E) fi ■ 

Installed 










A project template for creating ASP.NET 

P Visual Basic 


eJ 

ASP.NET vNext Empty Web Application 

Visual C# 

applications. You can create ASP.NET Web 
Forms, MVC, or Web API applications end 






add many other features in ASP.NET. 

P Store Apps 


©J 




, 12 “"”“"' 



ASP.NET vNext Class Library 

Visual C# 


P Office/SharePoint 


HH 

ASP.NET vNext Console Application 

Visual C# 


Cloud 






LightSwitch 






Reporting 






Silve (light 






WCF 














Location: I c:\users\rahulsahay1 9\documents\visual studio 14\Projects - 1 | Browse... ] 

Solution name: WebApplicationl 0 Create directory tor solution 



So, here as you can see that, currently all 
different kinds of vNext templates are 


listed under the same web stack. This 
organization of templates will change 
once full-fledged version of ASP.NET 
vNext is released. And also it is quite 
possible that name “ vNext ” will also get 
changed with some other more 
meaningful name. Now, let's discuss 
different templates listed here in brief. 

• ASP.Net Web Application I 

don't think for this particular 
template I have to say anything 
as this is the same old template 
which we have been using 
earlier in VS 2013, where in it 
is popping an option selector 
window to select a MVC, Web 
Forms, Web API template. 

• ASP.Net vNext Empty Web 



Application: - Again this is 
very obvious thing. This is an 
empty app for professional who 
want to write each bit on their 
own right from the scratch. 

ASP.Net vNext Web Application: 
- Now, this is full blown app. 
Very good starting point for all 
developers. It has features like 
Bootstrap, ASP.Net Identity 
etc. So, basically this template 
will have all the basic stuffs 
needed to jump start with a new 
application. 

ASP.Net vNext Class Library: - 

Class library is again a very 
powerful and familiar concept 
wherein we are building 



reusable components under one 
repository. Now, the special 
thing about this class library is; 
it will act as plugin. It is going 
to plugin in ASP.Net vNext 
Loader mechanism, which I'll 
show later in this chapter. 

ASP.Net vNext Console 
Application: - So, if you 

remember earlier as I said 
ASP.NET vNext can be self- 
hosted as well. So, you can 
think of this vNext Console App 
as self-hosted project template. 


Creating your 1st Visual 
Studio 14 MVC 


Project:- 

So, let's go ahead and create my 1st 
MVC project and let me give it name 
“MyFirstMVCApp”. 



So, below is the screen shot of the 
default application. 



YourASP.NET application 

SI Solution ‘MyFilltMUCApp* <1 project) 

A ~ MptkltMVlApp 

P ■ Content 


.0 !taj'^feidnu.honl 

This application CUS,0UIZ ‘ 4PP DiPL0Y “ THQP 

consists of: Add Suoc lies Run tout 100 locally Get help 


Theming using Bootstrap Md Adlhenhcnton uomg 



So, now when you expand different 
folders in solution explorer, you will see 
very much MVC stuffs what we have 
done earlier. 



Solution Explorer 

(2t T o * C if 1 ® A -- 

- 9 x 

1 Search Solution Explorer (Ctrl +;) 

P 

JJl Solution 'MyFirstMVCApp' (1 project) 


| a MyFirstMVCApp 




> References 

J Content 


O bootstrap.css 
0 bootstrap. min. css 
|3| Site. css 
Controllers 

c» AccountController.es 
c* HomeController.es 
^ Models 

c* AccountViewModels.es 
c« ldentityModels.es 
> Scripts 

Views 

> Account 

> Home 

> Shared 
1 config.json 
(S) project.json 

Project_Readme.html 
c« Startup.es 



Now, before delving deep inside, let's 
try running this app at once 1 st . 



ASP.NET vNext 

ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and 
JavaScript. 



This application consists Customize app Deploy 



So, almost all the things are similar, 
what we usually have in ASP.NET 
MVC. But, some of the different things 
which you can easily pick up simply 
scanning the solution explorer like 
“ config.json 


Configurations in MVC 
Project:- 


C>4 MyFirstMVCApp - Microsoft Visual Studio (Administrator) 

O • Q - £ U J* • ► Start - O - | Debug -| | Any CPU ^ | Q 



J<t-MyFirstMVCApp-f7b733a3-8b7f-4l 


So, with ASP.Net vNext Microsoft 
created new config system called as 
“ config.json” . So, basically here this 
template keeps track of application 
settings such as connection strings as 
shown above in the screen shot. In a 
vNext project we can use a 
“ Web.config ” file for application 
settings, but we have other options as 


well. For example, we can plug in 
different NuGet configuration packages 
that enable you to use “iTii” files or 
“.json” files. The template uses 
“ Microsoft. Framework.Configurationl 
and creates a “config.json” . The Startup 
class includes this code that gets the 
settings from “ config.jsonT and puts 
them in environment variables: 



| B MyfirstMVCApp -|^MyFmtMVCApp.Startup 

I using Microsoft. AspNet. Security. Cookies; 
using Microsoft. Data. Entity; 
using Microsoft. Framework. ConfigurationModel; 

| using MyFirstMVCApp. Models; 



public void Configure(IBuilder app) 


// Setup configuration sources 
var configuration - new Configuration(); 
configuration. Add3sonFile("config. json"); 
configuration . AddEnvironmentVariables( ) ; 


// Set up application services 

{ 

// Add EF services to the services container 
services . AddEntityFramework( ) 

. AddSqlServer( ) ; 

services. SetupOptions<DbContextOptions>(options => 

1 

options . UseSqlServer (configuration . Get( "Data : Def aultConn 

}); 


|S Configufe(IBuildenpp) 




services. Addldentity<ApplicationUser>() 

• AddEntityFraaiework<ApplicationUse'' J ApplicationDbContext>() 

. AddHttpSignln ( ) ; 


Now, the “ Configuration ” class also 
provides other methods for working with 
configuration data, such as a “Gef ’ 
method that enables you to retrieve a 
specified setting as shown below 

// Setup configuration sources 
var configuration = new Configuration(); 
configuration. Add D son F ile ( " conf ig . j son " ) ; 
configuration . AddEnvironmentVariables ( ) ; 


string connectionStrinj = configuration. Get("Data:DefaultConnection:ConnectionString"); 


Project.json:- 


“ Project.json ” is the file which 
maintains a list of dependencies for the 
project and also list of build out 
configurations. It also includes list of 
commands. As shown below in the 
screen shot, first part is list of 
dependencies on which project is built. 



Here, in this project.json you can also 


get intellisense. Like suppose you want 
to add any new dependency You can 
directly add from here as well with frilly 
qualified version no as shown below. 



So, as you can see in the above screen 
shot, it will search in nuget package 
manager will try to get the exact package 
which you are trying to resolve. Then, it 
has a list of commands which is going to 


be used when you are going to host the 
application on its own basically self- 
hosting. 


imands": { 

/* Change the port number when you are self hosting this application */ 

"web”: "Microsoft. AspNet. Hosting --server Microsoft. AspNet. Server. WebListener --server. urls htto : //localhost : 5886 " 


Then, inproject.json file we also have 
build output configurations options as 
shown below. 


configurations": { 
"net451" : { }, 
"kl0” : { > 


Now, these settings correspond to 
“ Active Target Framework ” options in 
the property pages as shown below. 



Now, here “ Active Framework ” is set 
to “4.5.1” . Now, if you see references 
for this project, it will be different from 
earlier versions of .NET. Now, it is 
more tidy neat and clean 


» f X 


a References 

> .NETFramework,Version=v4.5.1 

t> Content 

^ a Controllers 

c* AccountController.es 
c* HomeController.es 
Models 

C» AccountViewModels.es 
c* ldentityModels.es 
> Scripts 

a Views 

> Account 

> Home 

> Shared 
Si config.json 
Si project.json 

Project_Readme.html 
C Startup.es 


Solution Explorer 

{£) T o-#C© r ®i A -- 

Search Solution Explorer (Ctrl +;) 

Solution 'MyFirstMVCApp' (1 project) 

~nr~ 


MyFirstMVCApp 





But, when you collapse this one, then it 
will list all the project related 
dependencies 


Solution Explorer 


T © - C 0 1 r i) ^ 

Search Solution Explorer (Ctrl +;) fi ” 

Solution 'MyFirstMVCApp' (1 project) 

A H MyFirstMVCApp 

a References 

a ,NETFramework,Version=v4.5.1 I 

> EntityFramework.SqlSetver (7.0.0-alpha2) 

> Microsoft.AspNetldentity.Authenti cation (3 . 0. 0- a I p h a 2) 

> Microsoft.AspNet.ld entity. Entity Framework (3.0.0-alpha2) 

> Microsoft.AspNet.Mvc (6.0.0-alpha2) 

t> Microsoft.AspNet.Security.Cookies (1.0.0-alpha2) 

> Microsoft.AspNet.Server.IIS (1.0.0-alpha2) 

> Microsoft.AspNet.Server.WebListener (1.0.0-alpha2) 

> Microsoft.AspNet.StaticFiles (1.0.0-alpha2) 

Microsoft.CSharp (4.0.0.0) 

> Microsoft.Framework.ConfigurationModel.Json (1.0.0-alpha2) 

Microsoft. VisualStudio.Web.BrowserLink. Loader (14.0-alpha2) 
mscorlib (4.0.0.0) 

System (4. 0.0.0) 

System. Co re (4. 0.0.0) 


So, here the idea is list out dependency 
tree. So, all meaningful and 


understandable part is listed above and 
when you expand these nodes, you will 
get more children for this parent node as 
shown below in the screen shot. 



Solution 'MyFirstMVCApp' (1 project) 

i n MyFirstMVCApp 

a References 

a ,NETFramework,Version=v4.5.1 


EntityFramework.SqIServer (7.0.O-alpha2) 


> Microsoft. AspNet.ldentity.Authentication (3.0.0-alpha2) 

> Microsoft.AspNet.ldentitv.EntityFramew ork (3.0.0-alpha2) 

a Microsoft.AspNet.Mvc (6.Q.0-alpha2) | 

Microsoft.AspNet.FileSystems (1.0.0-alpha2) 

Microsoft.Asp Net. Http (1.0.0-alpha2) 

> Microsoft.AspNet.Mvc. Common (6.0.0-alpha2) 

> Microsoft.AspNet.Mvc. Core (6.0.O-alpha2) 

> Microsoft.AspNet.Mvc. ModelBinding (6.0.0-alpha2) 

t> Micro soft. As pNet.Mvc. Razor (6.0.0-alpha2) 

> Microsoft.AspNet.Mvc.Razor.Host (6.0.0-alpha2) 

> Microsoft.AspNet. Razor (4.0.0-alpha2) 

t> Microsoft.AspNet.RequestContainer (1.0.0-alpha2) 

> Microsoft.AspNet.Routing (1.0.0-alpha2) 

> Microsoft.Framework.ConfigurationModel (1.0.0-alpha2) 

> Microsoft.Framework.Dependencylnjection (1.0.0-alpha2) 

> Microsoft.AspNet.Security.Cookies (1.0.0-alpha2) 

> Microsoft.AspNet.Server.IIS (1.0.0-alpha2) 

> Microsoft.AspNet.Server.WebListener (1.0.0-alpha2) 

> Microsoft.AspNet.StaticFiles (1.0.0-alpha2) 

Microsoft.CSharp (4.0.O.0) 

> Microsoft.Framework.ConfigurationModel.Json (1.0.0-alpha2) 
Microsoft.VisualStudio.Web.BrowserLink. Loader (14.0-alpha2) 
mscorlib (4.0.0.0) 

System (40,0.0) 


So, when you have to see property for 
any of these references, you can just 



right click that check it's properties like 
explained below. 


E Solution 'MyFirstMVCApp' (1 project) 

a — ] MyFirstMVCApp 

a References 

a .NETFramework,Version=v45.1 


Micro 

Micro 

Micro 

Micro, 


Scope to This 

Op New Solution Explorer View 
A Properties 


Alt + Enter 


Microsoft.AspNet.Server.IIS (1.0.0-alpha2) 
Microsoft.AspNet.Server.WebListener (1 .0.0-alpha2) 
Microsoft.AspNet.StaticFiles (1.0.0-alpha2) 

Microsoft.CSharp (40.0.0) 

Microsoft.Framework.ConfigurationModel.Json (1.0.0-alpha2) 
Microsoft. VisualStudio.Web.BrowserLink. Loader (14.0-alpha2) 
mscorlib (4.0.0.0) 

System (40.0.0) 

System. Co re (40.0.0) 


When you click on “ Properties ” for that, 
it will tell exactly where the “r///” is 
located and its version 


Solution Explorer 


ft T o - ? C # r ii a 

Search Solution Explorer (Ctrl +;) P ■' 

SI Solution 'MyFirstMVCApp' (1 project) 

a H MyFirstMVCApp 

a References 

a ,NETFramework,Version=v4.5.1 I 

> EntityFramework.SqlServer (7.0.0-alpha2) 

> Micro soft.AspNetldentity.Authenti cation (3.0.0-alpha2) 

> Microsoft.AspNet.ld entity. Entity Framework (3.0.0-alpha2) 

> Micro soft.AspNet.Mvc (6.0.0-alpha2) 

> Microsoft.AspNet.Security.Cookies (1.0.O-alpha2) 

> Microsoft.AspNet.Server.IIS (1.0.0-alpha2) 

> Microsoft.AspNet.Server.WebListener (1.0.0-alpha2) 

> Microsoft.AspNet.StaticFiles (1.0.0-alpha2) 

■ i Microsoft.CSharp (4.Q.Q.Q) ^ 


Solution Explorer 


Team Explorer Class View 


Properties 


EntityFramework.SqlServer Dependency 


°!i A 

El General 

1 Name 

| EntityFramework.SqlServer 

Path 

c:\users\rahulsahay19\documents\visual studio 1 

Type 

Package 

Version 

7.0.0-alpha2 


Startup class 





So, this is the place where everything is 
configured. If it is not here, it means it's 
not there in the application. And one 
thing which you might have noticed in 
the startup file that there is no “ System 
Web”. So, if you need some kind of 
middleware kind of stuffs like Static 
files, Cookie based authentication, 
well you have to actually add in your 
application. By default, the vNext 
hosting environment expects to find a 
startup class named “Startup”. This 
class contains a “ Configure ” method 
that takes an “I Builder” parameter. This 
configure method is used to configure 
HTTP pipelines. Now, let's focus what 
this template gives you by default 



Bnamespace MyFirstMVCApp 

|{ 

public class Startup 

{ 

public void Configure(IBuilder app) 

{ 

// Setup configuration sources 
var configuration = new ConfigurationQ; 
conf igu ration . Add D sonFile (" conf ig . j son" ) ; 
configuration . AddEnvironmentVariables( ) ; 

string connectionstring = configuration. Get(”Data:DefaultConnection:ConnectionString”); 

// Set up application servi ces 
I* app. UseServices (services => |. , .| ); 

// Enable Browser Link support 
app . UseBrowserLink ( ) j 

// Add static files to the request pipeline 
app . UseStat icFiles ( ) j 

// Add cookie-based authentication to the request pipeline 
app.UseCookieAuthentication(new CookieAuthenticationOptions 
{ 

AuthenticationType = Def aultAuthenticationTypes . ApplicationCookie, 

LoginPath = new PathString(" /Account/Login ”), 

»; 

II Add MVC to the request pipeline 
H app.UseHvc(routes => |. . ,| ); 

I > 
l > 

[} 


We have environment based config 
system which can pull name value pairs 
from variety of sources. So, it can pull 
values from“json” files, it can also pull 
environment variables and many other 
things. 


// Set up application services 
app.UseServices(services => 

{ 

// Add EF services to the services container 
services . AddEntityFramework( ) 

. AddSqlServer ( ) ; 

// Configure DbContext 

services. SetupOptions<DbContextOptions>(options => 

{ 

options . UseSqlServer ( configuration . Get ( "Data : Def aultConnection : Connectionstring" ) ) ; 

»i 

// Add Identity services to the services container 
services. AddIdentity<ApplicationUser>() 

.AddEntityFramework<ApplicationUser, ApplicationDbContext>() 

.AddHttpSignIn()j 

// Add MVC services to the services container 
services . AddMvc ( ) ; 


Now, as we discussed earlier in this 
chapter, that everything is going to be 
“DI (Dependency Injection) first ” in 
MVC 6. So, “ UseServices ” is the 
implementation for that only. Now, here 
is the place where in you want to setup 
the services which you want to use 
across the application. Like here we 
have default setup for “ Entity 
Framework ” , it's also configured 


“ dbContext ” which will be injected into 
the controllers. Then, it's settingup 
“ASP.Net Identity and last but not the 
least settingup the MVC Services. 

Then, it gives you “UseBrowserLink ” , 
which enables you to edit your code and 
just save it and then upon refreshing in 
the browser it will take effect without 
building. 


// Enable Browser Link support 
app . UseBrowserLink( ) •, 


Then, we have section for setting up 
static files in the middleware like 
“ Javascript files”. 


// Add static files to the request pipeline 
app . UseStaticFiles ( ) ; 


Then, we have cookie authentication 


// Add cookie-based authentication to the request pipeline 
app . UseCookieAuthentication ( new CookieAuthenticationOptions 
{ 

AuthenticationType = DefaultAuthenticationTypes . ApplicationCookie, 
LoginPath = new PathStringC'/Account/Login"), 

»; 

// Add MVC to the request pipeline| 
app. UseMvc( routes => |. . ,| ); 


And in the end we have routing 
declaration which is for both MVC and 
Web API. 


// Add MVC to the request pipeline 
app.UseMvc (routes => 

{ 

routes . MapRoute ( 

name: "default", 

template: "{controller}/{action}/{id?}", 

defaults: new { controller = "Home", action = "Index” }); 

routes . MapRoute ( 
name: "api", 

template: ”{controller}/{id?}“); 

}); 

)\ 

Now, let's look Start Up class in detail. 
For an instant, let me go ahead and 
comment out the complete “ Startup.es ” 
class and then refresh the page. So, now 
going ahead you don't need to compile 
the solution every time for the change. 
So, in MVC 6 you just save the changes 
and F5 in browser, then it will take the 
effect in the browser. Thanks to new 
“Roslyn compiler ”. So, now when I 
refresh the page, it will produce me the 
below output. 


r 


Helios failed to start. 


The ApplicationStart method threw an exception. Detai led exception information i s below. 


System .Exception: TODO: Startup or Startup cl ass not. found in assembly MyFirstMVCApp 

at MicrosoftAspNet.Hosting.StartupStartupLosder,LoadStartup(String applicationName, String environmentName, ILIst'l diagnosticMessages) 
at Microsoft.AspNet.Loader.l ISJd rHtlpApplication.Hel iosStartupLoaderProvider. Wrappings tartupLoader.LoadStartup(String applicationName, String 

at MkrosoftAspNet.Hosting.Startup.StartupManager.LoadStartup(String applicationName, String environmentName) 

at Micro so ftAspNetHosting.H os tingEngine£nsureApplicationStartup(Hosting Context con text) 

at MkrosoftAspNet.Hosdng.H os tingEngine.EnsureAppllcadonDelegate(H os tingContext context) 

at Micro so ftAspNet.Hosting.H os tingEngine.S tart(Hosti ngCon text context) 

at MicrosoftAspNet, Loader .1 IS.KI rHttpApplication,ApplicationStart(IHttpAppllcatlon sppll cation) 

at Micro5oft.AspNet.Loader.llS.HttpApplicationBa5e.lnvokeApplicationStart(lHttpApplicab'on application) 


So, now the another fancy thing is that 
“ Yellow Screen of Death” is replaced 
with new fancy screen as shown above 
with complete stack trace. So, now let 
me go ahead and try something different, 
let's try build an Async request. Now, 
one more important point to note here in 
MVC 6, everything is going to be Async. 
So, what this will do, it will take the 
Async request and write to the response. 


app. Run(async req => await req. Response. WriteAsync ("Hello MVC6 ")); 


And, this will produce me the below 
output 


f 0 localhost:49398 


C ' Q localhost:49398 

Hello MVC6 


Adding a Class Library 
Project:- 

Now, let's go ahead and try adding 
another type of project in our solution. I 
gave it name “ MyClassLibrary 



Now, once it gets added successfully. It 
will be presented in the default 
behavior, so no change here. 



Now, since we have added this new 
project in our solution. Let's try adding a 
reference in our web project. So, in 
order to add the reference of this 
project, we need to list this in our 
“ projection ” file as shown below. 


http!//wuw».a5p.net/media/4878834/projectjson 


"dependencies": { 

"EntityFramework.SqlServer": “7.0.0-alpha2", 

"Microsoft. AspNet. Mvc": “6.0.0-alpha2“, 

"Microsoft. AspNet. Identity. EntityFramework": "3.0.0-alpha2", 
"Microsoft. AspNet. Identity. Authentication": "3.0.0-alpha2”, 
"Microsoft .AspNet . Security . Cookies" : ”1 . 0 . 0-alpha2" , 

"Microsoft .AspNet .Server . IIS" : "1. 0. 0-alpha2”, 

"Microsoft .AspNet . Server . WebListener" : ”1.0 . 0- alpha2" , 
"Microsoft . AspNet . StaticFiles" : "1.0. 0-alpha2", 

"Microsoft. Framework. ConfigurationModel.lson": "1.0.0-alpha2", 
"Microsoft .VisualStudio.Web.BrowserLink. Loader": "14.0-alpha2", 


‘■yh. 


>• fi Search remote NuGet packages for 'm 

com J| 

"web”: "Microsoft. AspNet. Hosting 


application */ 

Microsoft . AspNet . Server . WebListener 


figurations": { 
"net451” : { }, 
"kl0" : { } 


} 


--server. urls http://localhost: 


So, as you can see in the above screen 
shot, “ MyClassLibrary ” got listed in the 
intellisense, so that's nice pretty mature 


config system, no chance of mistake 
here. 


http://wuuw, asp.net/media/4878834/projectjscin 


"dependencies”: { 

"EntityFramework.SqlServer": “7.0.0-alpha2", 

"Microsoft . AspNet .Mvc" : "6 . 0 . 0 - alpha2" , 

"Microsoft.AspNet. Identity . EntityFramework": ”3.0.0-alpha2", 
"Microsoft . AspNet . Identity . Authentication "3.0 . 0-alpha2” , 
"Microsoft. AspNet. Security. Cookies": "1.0.0-alpha2”, 
■Microsoft. AspNet. Server. IIS": "1.0.0-alpha2", 
"Microsoft.AspNet . Server . WebListener” : "1.0 . 0-alpha2 " , 
"Microsoft.AspNet . StaticFiles” : ”1 .0 .0-alpha2”, 

"Microsoft. Framework. ConfigurationModel. Ison": "1.0.9-alpha2", 
jalStudio. Web. BrowserLink. Loader": "14.0-alpha2" 


| "MyClassLib 




“configurations": { 
"net451" : { }, 
-kl0" : { } 


un 


r Microsoft. AspNet. Server. WebListener - 


r.urls http : / /localhost : 


Now, since I saved this file, so I can 
verify the references as well. 


a *“] MyFirstMVCApp 

a References 

a .NETFramework,Version=v4.5.1 

> EntityFramework.SqIServer (7. 0. 0- a I p h a 2) 

> Microsoft.AspNet.ldentity.Authentication (3.0.0-alpha2) 

> Micro soft. As pNet.ldentity.Entity Frame work (3.0.0-alpha2) 

> Micro soft. As pNet.M vc (6.0.0-alpha2) 

> Microsoft.AspNet.Security.Cookies (1.0.0-alpha2) 

> Microsoft.AspNet.Server.IIS (1.0.0-alpha2) 

> ■■ Microsoft.AspNet.Server.WebListener (1.0.0-alpha2) 

> Microsoft.AspNet.StaticFiles (1.0.0-alpha2) 

Microsoft.CSharp (4.0.0.0) 

> Microsoft.Framework.ConfigurationModel.Json (1.0.0-alpha2 

■ ■ Microsoft. VisualStudio.Web.BrowserLink. Loader (14.0-alpha2[ 

mscorlib (4.0.0.0) 

|> MyClassLibrary (1.0.0) | 

■ ■ System (4. 0.0.0) 

System. Co re (4. 0.0.0) 


Now, when you check the property of 
“MyClassLibrary ” , it will be of type 
“ Project ” as shown below. 


Team Explorer Class View 


Solution Explorer 


D roperties ^ ^ > 

MyClassLibrary Dependency 

°l= Qx > 

□=. z’*’ ^ 


3 General 

1 Name 

J MyClassLibrary 

Path 

C :\My Exp e ri m e nts\MyF i rstMVC Ap p\My 

1 Type 

Project 

Version 

1.0,0 

Name 

Simple name of the dependency. 



On the other hand others are of type 
“ Package ” as shown below. 




Team Explorer Class View 


Solution Explorer 


froperties 

- ? X 

Microsoft. AspNet.Mvc Dependency 

* 

D i= > 

3 General 

1 Name 

| Microsoft.AspNet.Mvc 

Path 

C :\My Exp e ri m e nts\MyF i rstMVC Ap p\p a c k : 

hype 

Package 

Version 

6.0.0-alpha2 


Name 

Simple name of the dependency. 


Since I have got the library project 
referenced in my project, let's try 
reading value from the class library 
project in one of our controllers. So, 
let's delete the default class provided in 
the class library project and create one 
new class with the name “ MyClass ” 




with a static method as shown below, 



Now, let's use this in our “ About 
Controller” . 


HomeController.es* ■* X 


Eg MyFirstMVCApp 


■ *i; MyFirstMVCApp. Controllers. HomeController - V AboutO 


Busing System; 

using System. Collections. Generic; 
using System. Linq; 

using Microsoft. AspNet.Mvc; 

a namespace MyFirstMVCApp. Controllers 

< 

B public class HomeController : Controller 

I i 

public IActionResult Index() 


{ 


return ViewQ; 


} 


public IActionResult About() 

{ 


I 


ViewBag. Message = MyClasslibrar-y 1 - •„ 


return View(); 




> 


© |ReadMes g ] string MyClassLibrary.MyClass.ReadMesgO 

© ReferenceEquals 


public IActionResult Contact() 
{ 





return View(); 


> 


> 


> 



So, now I saved this. So, when I refresh 
the browser without even building my 
solution, it will take effect. So, again 
behind the scenes, it's “ Roslyn ” magic. 


Application n; 



About. 

Hello from MyClassLibrary Project! 



Deployment to Azure 


Now, in this section, I am going to 
demonstrate little different way to host 
the site directly in Azure. So, here, 
currently I am on my VM (Virtual 
Machine). I have running app on this 
machine and from this machine, I'll 
publish my site on cloud. So, to do the 
same, right-click on the web project and 
click on publish option as show below. 


Solution Explorer 


- ¥ 


(2t 

'o 

* C/ S 1 r ®i > - 


Search Solution Explorer (Ctrl+;) 

EJ1 Solution 'MyFirstMVCApp' (2 projects) 
A ^ MyClassLibrary 
> References 

c* MyClass.es 
d) project.json 


& 

Build 


> 


Rebuild 


- 


Clean 


c 


View 

► 

> ■ 

& 

Publish... 


> 


Scope to This 


> \ 

0 

New Solution Explorer View 


i 

0 


Build Dependencies 

► 

D 


Add 

► 

C« 


Manage NuGet Packages... 



O 

Set as StartUp Project 




Debug 

► 



Source Control 

► 


& 

Cut 

Ctrl +X 


X 

Remove 

Del 


tot 

Rename 



Then, from the publish wizard, just click 
“ Azure Web Sites”. 


Publish Web 


^7* Publish Web 


Profile 


Connection 


Select a publish target 

© Windows Azure Web Sites 
j 0 File System 


Find other hosting options at our web hosting aalletv 


Then, provide your credentials and login 



Publish Web 


Profile 


Connection 


Select a publish target 



Now, one point to note here, I am going 
to create new Azure website right from 
here. Earlier, during movie review site 
deployment, I have already created one 
site for that and then I deployed the files 
there. So, this is another technique to 
deploy your website on Azure. 



Publish Web 


Publish Web 



So, as you can see in the dropdown, it is 
showing me the sites which I already 
hosted on my Azure. So, basically this 
option is for that case when you want to 
deploy some changes on the existing 
web site. But, here I'll go with the 
“New” option as I have to create a new 
website for this new MVC 6 application. 


Publish Web 



Cor 


So, in the above screen shot I have 
already provided the required details. 
Now, I click on create button and then it 
will take all the required dependencies 
from the site; package them together and 
deploy the same on Azure website as 
shown below. 


Publish Web 



Then, upon successful creation of site, if 
you navigate the same in the browser, 
then it will show you the default page of 
the Azure as shown below. 


This web site has been 
successfully created 

There's nothing here yet, but Microsoft 
Azure makes it simple to publish 
content with GIT. FTP or your favorite 


Then from connection tab, there will be 
“ Publish ” button which will bundle the 
files and push the same on the 
Destination URL as shown below. 


Publish Web 


Profile 


Connection 


RahulMVC6 

Publish method: | Web Dep loy^ 


Server: rahulmvc6.scm.azurewebsites.net:443 

Site name: RahulMVC6 

User name: j $RahulMVC6 

Password: ••••••••••••••••••••••••••••• 

0 Save password 

Destination URL: http://rahulmvc6.azurewebsites.net 
| Validate Connection~| © 


After successful publish, it will flag the 
message in the activity window as 
shown below 







Publish: RahulMVC6 








Publish Succeeded. 




http://rahulmvc6.azureweb 

ltes.net/ 



v View Details 





So, now, when I refresh the page in the 
browser, it will show my recently 
developed MVC 6 website on Azure. 



ASP.NET vNext 


ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and 
JavaScript. 


So, this is a very basic site with all the 
stuffs in there like Register/Login etc. 
But, it's a good starting point to get 
started. 



Register. 

Create a new account 


NET Application 



Login 


© 2014 - My ASP NET ApplltaMn 


Bin:- 


Now, in this section, we are going to do 
a bit deep dive. So, in this section, we'll 



first explore that our project file 
specially bin directory. 



MyfirstMVCApp ► MyfirstMVCApp ► 


v Cr | | Search bin 


5® This PC 
Desktop 
Documents 
Downloads 
Jit Music 


7/19/2014 608 PM 
7/20/2014 7:24 AM 


File folder 
File folder 


7/19/2014 608 PM Applies 


i Temporary Storage i 


Here, you will notice one new thing, 

“ AspNetLoader.dll Now, this dll is 
pretty dynamic, it will take care of your 
code changes without build. So, every 
code change or “ cs file ” change is a 
complete refresh of process. Now, one 
more point to notice here, that you won't 


find any dll either in “ Debug/Release ” 
folder neither pdb ” file. Now, pdb ” 
file is the one which enables user to 
debug the code. Then, how can 
developer debug the application. Well, 
to answer this question, it's dynamic in 
memory. So, when you see the 
“ Modules ” section under “ Debug 
Window ”, you will find this critical 
piece of information. 


Now, this will open a modules window 
as shown below in the screen shot. 



So, if you watch the above highlighted 
section closely, you will notice that it is 
loading the symbols to debug the file 
dynamically; that is why no path is there. 
Now, dynamic here means in memory. 
This also means pdb ” is dynamic. 


Self Hosting:- 


Now, in order to self-host the files, you 
need to follow couple of steps. These 
are mentioned below. 

You need to change the “ Active Target 
Framework ” for the project to “4.5” , 
which is cloud optimized version. 
Currently, it's running on the desktop 
version which is “ 4.5.1 ”. 


Configuration: | Active(Debug) 

t Configuration Properties 
General 
Debugging 


WebApplicationl Property Pages 


v| Platform: | Active(Any CPU) 


OutputType 
K Runtime Version 


» | | Configuration Manager... 



■NET Core Framework 4.5 
<inheritfrom parent or project defaults:® 


So, now I have set the Framework to 
“4.5”. Now, I'll right click the project 
and publish the same on the “ File 
System ” as shown below. 


Build 

Rebuild 

Clean 

View 


Publish.., 


Scope to This 

0 New Solution Explorer View 
Add 

Manage NuGet Packages... 
0 Set as StartUp Project 
Debug 

Source Control 
& Cut 
X Remove 
DCllli Rename 


Ctrl +X 
Del 


pplicationl 


irences 

itent 

trollers 

dels 

pts 


fig.json 

ectjson 

ect_Readme.html 

tup.cs 


Unload Project 

C* Open Folder in File Explorer 
f* Properties Alt+Enter 


i 



Publish Web 


Profile 


Connection 


Select a publish target 

@ WlndowsAzure Web Sites 
| Q File System 



Publish 


Close 





Then, upon clicking publish button it 
will publish the files at the desired 
location as shown below. 





Publish: | RahulFileSystem 

• 

Site was published successfully file:///C:/Rahul 
v View Details 



Now, when you open the folder, you will 
see all executables with a bunch of files. 



© ® - t |± ► This PC ► Local Disk (O) ► Rahul i~ 


Rahul 


_]o x 

- © 

v Ci | | Starch Rahul P | 


yf Favorites 

HI Desktop Jt packages 

M Downloads it wwwroot 

sj Recent places §] web 


Date modified Type Size 

7/20/2014 7:13 PM Rle folder 

7/20/20147:13 PM Rlefolder 

7/20/20147:13 PM Windows Comma... 1KB 


I* This PC 
fc Desktop 
2D Documents 
fc. Downloads 
ib Music 
£ Pictures 
3 Videos 

Local Disk (C:) 
r-j Temporary Storage i 

Qu Network 


So, this web is going to be executed by 
the command line and if you see inside 


the “ wwwroot ”, it will have all the files 
required to get deployed on the localhost 
as shown below. 


nO i * 


wwwroot 


1 - LgJ x 

Home Share 

View 



^ © 

© • 1 1* > Th 

PC ► Local Disk (O) ► Rahul 

wwwroot ► 

v C> | | Search wwwroot 

» 1 


Name 

Date modified 

Type Size 


■ Desktop 

it bin 

7/20/20147:13 PM 

File folder 


Ji Downloads 

k Content 

7/20/20147:13 PM 

File folder 


Hi Recent places 

k Controllers 

7/20/20147:13 PM 

File folder 



k Models 

7/20/20147:13 PM 

File folder 


:fl This PC 

*■ Properties 

7/20/20147:13 PM 

File folder 


Jl Desktop 

k Scripts 

7/20/20147:13 PM 

File folder 


Jll Documents 

k Views 

7/20/20147:13 PM 

File folder 


M Downloads 

£T config 

7/20/2014 5:47 PM 

JSON File 

1KB 

Music 

ftj k 

7/20/20147:13 PM 

Configuration sett.. 

1KB 

Pictures 

H project 

7/20/2014 5:47 PM 

JSON File 

1 KB 

B Videos 

jj Project_Readme 

7/20/2014 5:47 PM 

HTML File 

5KB 

m Local Disk (&) 

c* Startup.es 

7/20/2014 5:47 PM 

Visual C* Source f... 

3KB 

i - Temporary Storage i 





Network 






Similarly, it has all the dependent 
packages required to run the app. 
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Now, if you open “ web.cmd ” in a 
notepad, it says go into the packages 
folder and run the “ klr.exe ”, which is 
nothing but cloud optimized run time, 
you can think of this as the minified 
version of CLR, which is only project 
specific. 




I 

@"5^dp0packages\kne 


web - Notepad 


:50-x86. 1.0. 0-alpha2\bin\kln.exe” --appbase -*-dpa* 


3ft. Fr 


nk.flpplic 
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Now, this application is fully self- 
contained application which means you 
can take these files in the pen drive and 
publish the same from the pen drive. It 
doesn't have any dependency on CLR or 
any other Microsoft environment related 
thing. So, you can run the same from 
Linux box or MAC machine, doesn't 
matter anymore. 

So, the next thing which I do here go in 
the “cmd” prompt, navigate to the 
location and then type “ web.cmd ”, then 
after it will flag the message “started” 
as shown below. 



Then, I'll navigate the self-hosted which 
is mentioned inproject.json file 
http://localhost:5000/ which will 
produce me the below output. 


ASP.NET vNext 

ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and 
JavaScript. 



Summary:- 

So, in this section, we have seen 
completely new kind of MVC or I would 
say pretty mature MVC which is going 
towards cross platform support. We 
have also covered vNext features, and 
also explored some of the exciting 
features of CLOUD (Azure). Like we 
have seen how to setup Virtual Machine 
with Visual Studio. Then, we have 



created new vNext project. We 
discussed various aspects of this new 
vNext template in detail. We have not 
only hosted the same on Azure, rather 
we have also made KLR version of file 
system which can be hosted on any 
platform. I hope you have enjoyed the 
journey towards learning MVC. 
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